Gulp 入門

Gulp 是什麼？

Gulp 是 Grunt 的替代者。做爲構建工具，Gulp 更具備語法簡潔易懂的優點，因此學習成本更低。
利用 Gulp， 咱們不只能夠對HTML、CSS（LESS|SASS）、JS（CoffeeScript）進行編譯；還能夠監聽文件的變化，同時藉助 livereloader 實時地刷新頁面；甚至還能夠對圖片進行壓縮優化。下面記錄一下個人 Gulp 學習之旅 。

安裝 Gulp

Gulp 須要 nodejs.org 運行環境，首先請確保你的機器上安裝了 node.js。

1. 安裝全局 Gulp

npm i --global gulp

1. 安裝本地（做爲開發依賴項）Gulp

npm i --save-dev gulp

1. 建立 gulpfile.js 文件

var gulp = require('gulp');

gulp.task('default', function() {
  // 將你的默認的任務代碼放在這
  console.log('hello world!');
});

1. 運行 Gulp
   在終端運行：

gulp

gulp 後不接參數，那麼默認會執行 default 任務，因此上面的代碼會在終端中輸出 hello world!。

使用插件壓縮腳本

gulp 依靠各類插件（plugin）實現經常使用功能。比方說咱們要對全部的 *.js 文件進行壓縮（藉助 gulp-uglify 插件）

var gulp = require('gulp'),
    uglify = require('gulp-uglify');

gulp.task('default', function() {
  gulp.src('js/*.js')
      .pipe(uglify())
      .pipe(gulp.dest('build/js'))；
});

從新在終端運行 gulp， Gulp 會對 js/ 目錄下的全部 js文件進行壓縮，而後輸出到 build/js 目錄。

給任務（Task）命名

上面咱們定義了一個對 js 進行壓縮的任務，並把它放在了默認的（default）任務下，其實咱們最好把處理腳本的相關操做抽出來，當獨做爲一個任務（例如 scripts ）更爲合理：

gulp.task('scripts', function () {
    gulp.src('js/*.js')
        .pipe(uglify())
        .pipe(gulp.dest('build/js'));
});

咱們能夠在終端運行指定的任務項，只需在 gulp 後面接上任務名參數：

gulp scripts

監聽文件的改變

咱們能夠藉助 gulp-watch 插件 來監聽文件的改變：

var gulp = require('gulp'),
    uglify = require('gulp-uglify'),
    watch = require('gulp-watch');

gulp.task('watch', function() {
    gulp.watch('js/*.js', ['scripts']);
});

這裏咱們定義了一個 watch 任務，監聽 js/*.js 文件的改變， watch() 的第二個參數是文件發生改變以後的回調，這裏表示，文件一旦發生改變，就會執行前面咱們定義的 scripts 任務，從新對 js 文件進行壓縮處理。

用Gulp來編譯LESS

Gulp 不只能夠對 js 進行壓縮處理，還能夠編譯 less/scss 文件，這一功能也是咱們常常在項目中用到的。這裏須要藉助 gulp-less 插件：

var gulp = require('gulp'),
    uglify = require('gulp-uglify'),
    watch = require('gulp-watch'),
    less = require('gulp-less');

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

使用Plumber來讓Gulp保持運行

若是咱們在編寫代碼的過程當中，不當心代碼寫錯了，存在語法錯誤，那麼編譯不會被經過，gulp 會在終端拋出異常，同時終止。這不是咱們想要的，咱們但願存在語法錯誤是，Gulp 可以給咱們提示，並繼續保持運行，而不是中斷，這個時候就要藉助 gulp-plumber 來幫咱們作這個事：

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

注意： 咱們要保證 plumber() 要放在其餘操做前面，這樣才能捕捉到錯誤異常。

實時更新（LiveReload）頁面

咱們指望代碼更新後不只可以從新編譯代碼，並且但願瀏覽器幫咱們本身刷新網頁，這個時候，咱們就須要用到 gulp-livereload 的幫助了，同時咱們須要安裝 livereload 的Chrome插件。

gulp.task('styles', function () {
    gulp.src('less/**/*.less')
        .pipe(plumber())
        .pipe(less())
        .pipe(gulp.dest('css/'))
        .pipe(livereload());
});

注意： 與 plumber() 相反，咱們要把 livereload() 放在操做的最後。

簡單的進行圖像壓縮

咱們能夠藉助 gulp-imagemin 對圖片進行優化：

gulp.task('images', function () {
    return gulp.src('src/images/*')
        .pipe(imagemin())
        .pipe(gulp.dest('dist/images'));
});

自動補全瀏覽器前綴

咱們還能夠用 gulp-autoprefixer 對 CSS3 中的一些屬性進行前綴的自動補全（例如 transition, transform 等 ）：

gulp.task('styles', function () {
    gulp.src('less/**/*.less')
        .pipe(plumber())
        .pipe(less())
        .pipe(prefixer('last 2 versions'))
        .pipe(gulp.dest('css/'))
        .pipe(livereload());
});

prefixer() 的參數可參考 這裏

最終的 gulpfile.js 配置文件

var gulp = require('gulp'),
    uglify = require('gulp-uglify'),
    watch = require('gulp-watch'),
    less = require('gulp-less'),
    plumber = require('gulp-plumber'),
    livereload = require('gulp-livereload'),
    prefixer = require('gulp-autoprefixer');

// Scripts Task
gulp.task('scripts', function () {
    gulp.src('js/*.js')
        .pipe(plumber())
        .pipe(uglify())
        .pipe(gulp.dest('build/js'))
        .pipe(livereload());
});

// Styles Task
gulp.task('styles', function () {
    gulp.src('less/**/*.less')
        .pipe(plumber())
        .pipe(less())
        .pipe(prefixer('last 2 versions'))
        .pipe(gulp.dest('css/'))
        .pipe(livereload());
});

// HTML Task
gulp.task('html', function() {
    gulp.src('*.html')
        .pipe(livereload());
})

// Image Task
gulp.task('images', function () {
    return gulp.src('src/images/*')
        .pipe(imagemin())
        .pipe(gulp.dest('dist/images'));
});

// Watch Task
gulp.task('watch', function() {
    livereload.listen();
    gulp.watch('js/*.js', ['scripts']);
    gulp.watch('less/**/*.less', ['styles']);
    gulp.watch('*.html', ['html']);
});

gulp.task('default', ['scripts', 'styles', 'watch']);

總結

上面列出了一些平常開發中比較經常使用的幾種功能，其餘更多的功能可參考官方 plugin 庫，根據我的需求對其功能繼續擴展。

---

文章地址：http://blog.mcbird.cn/2015/08/28/learning-gulp/