我們上一篇安裝node環境和gulp工具，並簡單介紹了gulp構建工具的使用；
這篇我們重點介紹gulp任務使用方法。

編譯Lass，Autoprefix及縮小化

檢查node環境是否完成安裝成功，執行命令如下：

node -v	//輸出node版本號

npm -v	//輸出npm版本號

以上兩個命令都可輸出版本資訊即表示node環境安裝成功。

第二步：安裝gulp

全域性安裝gulp，執行命令如下：

npm install --global gulp	//全域性安裝gulp工具

gulp -v	//檢查gulp是否安裝成功

第三步：新建專案並建立gulp環境依賴

執行命令如下：

mkdir testapp &&
 
 cd mkdir testapp //testapp 表示專案名稱

npm init //建立專案，如果許可權不夠加上sudo執行，按照提示一步步操作即可

npm install --save-dev gulp	//建立專案的gulp依賴

npm install gulp-less gulp-autoprefixer gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-clean gulp-notify gulp-rename gulp-livereload gulp-cache --save-dev //載入gulp所需外掛
 

使用 —-save-dev 來更新package.json檔案、 devDependencies 的值，表明專案依賴gulp。

常用的gulp外掛如下：
編譯Lass (gulp-lass)
Autoprefixer (gulp-autoprefixer)
縮小化(minify)CSS (gulp-minify-css)
JSHint (gulp-jshint)
拼接 (gulp-concat)
醜化(Uglify) (gulp-uglify)
圖片壓縮 (gulp-imagemin)
即時重整(LiveReload) (gulp-livereload)
清理檔案 (gulp-clean)
圖片快取，只有更改過得圖片會進行壓縮 (gulp-cache)
更動通知 (gulp-notify)

第四步： 新建配置gulpfile.js檔案，並執行gulp

在專案根目錄新建一個gulpfile.js檔案，檔案程式碼如下：

// 引入 gulp
var gulp = require('gulp'); 

// 引入元件
var jshint = require('gulp-jshint');
var less = require('gulp-less');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');

// 檢查指令碼
gulp.task('lint', function() {
    gulp.src('./js/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'));
});

// 編譯less
gulp.task('less', function() {
    gulp.src('./less/*.less')
        .pipe(less())
        .pipe(gulp.dest('./css'));
});

// 合併，壓縮檔案
gulp.task('scripts', function() {
    gulp.src('./js/*.js')
        .pipe(concat('all.js'))
        .pipe(gulp.dest('./dist'))
        .pipe(rename('lib.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest('./dist'));
});

// 預設任務
gulp.task('build_dev', function(){
    gulp.run('lint', 'less', 'scripts');

    // 監聽檔案變化
    gulp.watch('./js/*.js', function(){
        gulp.run('lint', 'less', 'scripts');
    });
});

然後執行gulp，執行命令為：

gulp build_dev