Gulp

  1. Install node.js
  2. Install gulp
  3. Create gulpifle.js
  4. Create package.js
  5. Execute command to initialize gulp:
    $ npm install --save-dev gulp
  6. Execute command to install dependency plugins:
    $ npm install
  7. Install new plugin:
    npm install gulp-sass --save-dev

    This command will update package.json automatically

Others:

Reference:

Sample package.json

{
  "name": "tongue_friends_web",
  "version": "1.0.0",
  "description": "",
  "main": "gulpfile.js",
  "scripts": {
    "test": "test-app"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-clean-css": "^2.0.12",
    "gulp-concat": "^2.6.0",
    "gulp-livereload": "^3.8.1",
    "gulp-rename": "^1.2.2",
    "gulp-sass": "^2.3.2",
    "gulp-sourcemaps": "^1.6.0",
    "gulp-uglify": "^1.2.0"
  }
}

Sample gulpfile.js

var gulp = require('gulp');
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var sourcemaps = require('gulp-sourcemaps');
var cleanCSS = require('gulp-clean-css');
var uglify = require('gulp-uglify');
var rename = require("gulp-rename");
var livereload = require("gulp-livereload");

var paths = {
  scripts: ['dev/js/**/*.js'],
  styles: 'dev/scss/**/*.scss', 
  images: 'client/img/**/*'
};

//因為sass在執行import的時候會delay, 所以要加上setTimeout(),否則常常會發生讀不到partial scss檔案的問題
gulp.task('styles', function () {
	return setTimeout(function(){
		return gulp.src(src.style)    // 指定要處理的 Scss 檔案目錄
	        .pipe(sass({
	        	includePaths: ['dev/scss'], 
	        	sourceComments: true
	        }).on('error', sass.logError)) // 編譯 Scss
	        .pipe(gulp.dest(dest.style));  // 指定編譯後的 css 檔案目錄
	}, 1000);
});

gulp.task('concat', ['styles'], function(){
	return gulp.src('dev/css/*.css')
		.pipe(concat('style2.css'))//會直接move到dest, 不會在dev/css裡
		.pipe(gulp.dest('assets/css/'));
});

gulp.task('minify-css', ['concat'], function(){
	return gulp.src('assets/css/style2.css')
		.pipe(sourcemaps.init())
		.pipe(cleanCSS({
			keepBreaks: false
		}))
		.pipe(rename(function(path){
			path.basename += ".min";
			path.extname = ".css";
		}))
		.pipe(sourcemaps.write('.'))
		.pipe(gulp.dest('./assets/css/'))
		.pipe(livereload());
});

gulp.task('minify-js', function(){
	return gulp.src('./dev/js/*.js')
		.pipe(uglify())
		.pipe(rename(function(path){
			path.basename += '.min';
			path.extname = '.js';
		}))
		.pipe(gulp.dest('./assets/js/'))
		.pipe(livereload());
});

//task "watch" must be added in default task list
gulp.task('watch', function() {
	livereload.listen();
	gulp.watch(paths.scripts, ['minify-js']);
	gulp.watch(paths.styles, ['styles', 'concat', 'minify-css']);
});


gulp.task('default', ['watch', 'styles', 'concat', 'minify-css', 'minify-js']);

Reference:

  1. Solution to slow down SASS comiple
    https://github.com/dlmanning/gulp-sass/issues/1