前端工程化（Gulp、Webpack）-Gulp

簡介

用自動化構建工具加強你的工做流程！

官網：https://gulpjs.com/

中文網：https://www.gulpjs.com.cn/

基於Nodejs的自動任務運行器，採用流的方式，借鑑了Unix操做系統的管道（pipe）思想，僅在最後一步才輸出文件到磁盤，快速高效。

官方僅提供5個API（4.0又增長了幾個），利用這5個API咱們能夠完成測試、檢查、合併、壓縮、格式化、自動刷新、部署、監聽等任務。並且由於只有5個API，上手也是特別簡單。

官方API

gulp.src(globs[, options])

匹配須要處理的源文件

• globs：源文件匹配路徑

可使用的模式:

「src/a.js」：指定具體文件；

「*」：匹配全部文件    例：src/*.js(包含src下的全部js文件)；

「**」：匹配0個或多個子文件夾    例：src/**/*.js(包含src的0個或多個子文件夾下的js文件)；

「{}」：匹配多個屬性    例：src/{a,b}.js(包含a.js和b.js文件)  src/*.{jpg,png,gif}(src下的全部jpg/png/gif文件)；

「!」：排除文件    例：!src/a.js(不包含src下的a.js文件)；

// 例
gulp.src(['style/**/*.scss','!style/{extend,page}/*.scss'])

• options[Object]：有3個屬性buffer、read、base

options.buffer：  類型：Boolean  默認：true 設置爲false，將返回file.content的流而且不緩衝文件，處理大文件時很是有用；

options.read：  類型：Boolean  默認：true 設置false，將不執行讀取文件操做，返回null；

options.base：  類型：String  設置輸出路徑以某個路徑的某個組成部分爲基礎向後拼接

gulp.dest(path[, options])

任務完成後文件輸出的路徑

• path: 文件將被寫入的路徑（輸出目錄）,也能夠傳入一個函數，在函數中返回相應路徑;
• options[Object]: 有兩個屬性

options.cwd：  類型：String  默認：process.cwd()：輸出目錄的 cwd 參數，只在所給的輸出目錄是相對路徑時候有效；

options.mode：  類型：String  默認：0777 八進制權限字符，用以定義全部在輸出目錄中所建立的目錄的權限；

// 例
.pipe(gulp.dest('./build/minified_templates'));

gulp.task(name[, deps], fn)

定義一個任務

• name：任務的名字，不能使用空格
• deps：前置任務，一個包含任務列表的數組，這些任務會在你當前任務運行以前完成（記得使用正確的異步執行方式：使用cb或者返回stream或promise ）。

//callback
// 在 shell 中執行一個命令
var exec = require('child_process').exec;
gulp.task('jekyll', function(cb) {
  // 編譯 Jekyll
  exec('jekyll build', function(err) {
    if (err) return cb(err); // 返回 error
    cb(); // 完成 task
  });
});

//返回stream
gulp.task('somename', function() {
  var stream = gulp.src('client/**/*.js')
    .pipe(minify())
    .pipe(gulp.dest('build'));
  return stream;
});

//返回promise
var Q = require('q');

gulp.task('somename', function() {
  var deferred = Q.defer();

  // 執行異步的操做
  setTimeout(function() {
    deferred.resolve();
  }, 1);

  return deferred.promise;
});

• fn：定義任務所要執行的一些操做。

gulp.watch(glob [, opts], tasks) 或 gulp.watch(glob [, opts, cb])

監視文件，而且能夠在文件發生改動時候執行指定任務

• glob：要監聽的文件入口，能夠是一個也能夠是多個（數組表示）
• tasks：文件改變要執行的任務的名稱數組
• cb：文件改變要執行的回調函數

gulp.task('watch1', function () {
    gulp.watch('less/**/*.less', ['testLess']);
});
 
gulp.task('watch2', function () {
    gulp.watch('js/**/*.js', function (event) {
        console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
    });
});

gulp.start(taskName1,taskName2,...)

執行指定任務

• taskName：任務名稱

開始使用

1、安裝

• 全局安裝

npm install --global gulp

• 項目依賴安裝

npm install --save-dev gulp

2、建立配置文件

在文件根目錄建立一個名爲gulpfile.js的文件。

var gulp = require('gulp');

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

3、新建任務

根據本身須要，安裝插件而且配置相應的任務。

如下經過幾個案例來學習：

清除文件（del）

var gulp = require('gulp'),
    del = require('del');
gulp.task('clear', function (cb) {
    del(['static/css', 'static/html', 'static/js', 'static/picture', 'static/skin', 'tour.xml'], cb);
});

Less編譯及壓縮（gulp-less、gulp-clean-css）

var gulp = require('gulp'),
    less = require('gulp-less'),
    cleanCSS = require('gulp-clean-css');
 
gulp.task('runLess', function () {
    gulp.src('src/less/*.less')
        .pipe(less())
        .pipe(cleanCSS({
            compatibility: 'ie8', //兼容
            keepSpecialComments: '*' //是否保留前綴
        }))
        .pipe(gulp.dest('src/css'));
});

圖片壓縮(gulp-imagemin,gulp-changed)

var gulp = require('gulp'),
    changed = require('gulp-changed'),
    imagemin = require('gulp-imagemin');
gulp.task('picmin', function () {
    return gulp.src('./dev/static/picture/**/*.{jpg,jpeg,png,gif,ico,JPG}')
        .pipe(changed('./static/picture')) //緩存起來，只有圖片變更時才壓縮，提升效率
        .pipe(imagemin({
            optimizationLevel: 5, //類型：Number  默認：3  取值範圍：0-7（優化等級）
            progressive: true, //類型：Boolean 默認：false 無損壓縮jpg圖片
            interlaced: true, //類型：Boolean 默認：false 隔行掃描gif進行渲染
        }))
        .pipe(gulp.dest('./static/picture'));
});

啓動本地服務器（browserSync）

var gulp = require('gulp'),
    browserSync = require('browser-sync').create();
gulp.task('server', function () {
    browserSync.init({
        server: {
            baseDir: './', // 在 dist 目錄下啓動本地服務器環境，自動啓動默認瀏覽器
            proxy: '10.6.63.234'
        }
    });
});

默認任務

能夠定一個名爲default的task，這個task就是默認的任務（直接運行gulp便可），能夠在這裏運行其餘的任務，我的習慣把整套構建流程都放在這裏調用。
插件能夠在網上搜索或者在npm官網查找，通常以gulp開頭，每一個插件的配置有所不一樣，能夠在插件介紹頁查看，就不一一介紹了。

4、運行任務

在命令行中運行任務

gulp taskName //運行指定名字的task
gulp          //運行默認任務

能夠在package.json的scripts中配置經常使用操做，而後經過npm run 方式調用

經常使用技巧

參見：https://www.gulpjs.com.cn/doc...

配合webpack

參見：https://www.jianshu.com/p/972...