Gulp

Gulp

 

 

什麼是Gulp

 

Gulp是基於Node.js的前端自動化構建工具

 

 

爲何使用Gulp

 

Gulp自動化構建工具能夠加強你的工做流程！

易於使用、易於學習、構建快速、插件高質！

在平常開發中，能夠藉助Gulp的一些插件完成不少的前端任務。

如：代碼的編譯（sass、less）、壓縮css，js、圖片、合併js，css、es6轉es五、自動刷新頁面等。

 

前端構建工具還有: grunt、webpack、browserify

 

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

插件地址： https://gulpjs.com/plugins/

 

 

使用Gulp

 

確保根目錄存在 package.json 文件，執行 npm init -y 生成

建議安裝3.x.x版本，穩定、插件較多

 

1.全局安裝 gulp：

$ npm install gulp@3 --global

 

2.做爲項目的開發依賴（devDependencies）安裝：

$ npm install gulp@3 --save-dev

 

3.在項目根目錄下建立一個名爲 gulpfile.js 的文件：

var gulp = require('gulp');

gulp.task('default', function() {

     // 將你的默認任務的代碼放在這

    console.log('hello world');

});

 

4.命令行運行 gulp：

$ gulp

 

直接運行 gulp 默認執行 default 任務（task）。

想要單獨執行特定的任務（task），請輸入 gulp taskName

 

 

Gulp API介紹

 

使用gulp，僅需知道4個API便可：gulp.task()、gulp.src()、gulp.dest()、gulp.watch()

 

gulp.task 方法用來定義任務

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

name 爲任務名

deps 是當前定義的任務須要依賴的其餘任務，爲一個數組。當前定義的任務會在全部依賴的任務執行完畢後纔開始執行。若是沒有依賴，則可省略這個參數。

fn 爲任務函數，咱們把任務要執行的代碼都寫在裏面。該參數也是可選的。

 

定義一個有依賴的任務

var gulp = require('gulp');

gulp.task('mytask', ['task1', 'task2', 'task3'], function() {

    console.log('執行任務 mytask');

});

 

gulp中執行多個任務，能夠經過任務依賴來實現：

// 只要執行default任務，就至關於把one,two,three這三個任務執行了

var gulp = require('gulp');

gulp.task('default',['one','two','three']);

 

若是某個任務所依賴的任務是異步的，gulp並不會等待那個所依賴的異步任務完成，而是會接着執行後續的任務。例如：

var gulp = require('gulp');

gulp.task('one',function(){

    //one是一個異步執行的任務

    setTimeout(function(){

        console.log('one is done')

    },5000);

});

 

//two任務雖然依賴於one任務,但並不會等到one任務中的異步操做完成後再執行

gulp.task('two',['one'],function(){

    console.log('two is done');

});

 

在異步操做完成後執行一個回調函數來通知gulp這個異步任務已經完成，這個回調函數就是任務函數的第一個參數。

var gulp = require('gulp');

gulp.task('one',function(done){ //cb爲任務函數提供的回調，用來通知任務已經完成

    //one是一個異步執行的任務

    setTimeout(function(){

        console.log('one is done');

        done();   //執行回調，表示這個異步任務已經完成

    },5000);

});

 

//這時two任務會在one任務中的異步操做完成後再執行

gulp.task('two',['one'],function(){

    console.log('two is done');

});

 

 

gulp.src 方法用來讀取文件

gulp.src(globs[, options])

globs 參數是文件匹配模式(相似正則表達式)，固然也能夠直接指定某個具體的文件路徑。當有多個匹配模式時，該參數爲一個數組。

options 爲可選參數，一般不須要用到。

 

gulp.src('./js/a.js'); // 讀取一個文件

gulp.src('./js/*.js'); // 讀取js目錄下的全部js文件

gulp.src(['./js/a.js','./js/b.js']); // 讀取兩個文件

 

匹配模式：

* 匹配文件路徑中的0個或多個字符，但不會匹配路徑分隔符(/)，除非路徑分隔符出如今末尾

** 匹配路徑中的0個或多個目錄及其子目錄，須要單獨出現，即它左右不能有其餘東西了。若是出如今末尾，也能匹配文件。

? 匹配文件路徑中的一個字符(不會匹配路徑分隔符)

[...] 匹配方括號中出現的字符中的任意一個，當方括號中第一個字符爲^或!時，則表示不匹配方括號中出現的其餘字符中的任意一個，相似js正則表達式中的用法

!(pattern|pattern|pattern) 匹配任何與括號中給定的任一模式都不匹配的

?(pattern|pattern|pattern) 匹配括號中給定的任一模式0次或1次，相似於js正則中的(pattern|pattern|pattern)?

+(pattern|pattern|pattern) 匹配括號中給定的任一模式至少1次，相似於js正則中的(pattern|pattern|pattern)+

*(pattern|pattern|pattern) 匹配括號中給定的任一模式0次或屢次，相似於js正則中的(pattern|pattern|pattern)*

@(pattern|pattern|pattern) 匹配括號中給定的任一模式1次，相似於js正則中的(pattern|pattern|pattern)

 

匹配示例：

* 能匹配 a.js,x.y,abc,abc/,但不能匹配a/b.js

*.* 能匹配 a.js,style.css,a.b,x.y

*/*/*.js 能匹配 a/b/c.js,x/y/z.js,不能匹配a/b.js,a/b/c/d.js

** 能匹配 abc,a/b.js,a/b/c.js,x/y/z,x/y/z/a.b,能用來匹配全部的目錄和文件

**/*.js 能匹配 foo.js,a/foo.js,a/b/foo.js,a/b/c/foo.js

a/**/z 能匹配 a/z,a/b/z,a/b/c/z,a/d/g/h/j/k/z

a/**b/z 能匹配 a/b/z,a/sb/z,但不能匹配a/x/sb/z,由於只有單**單獨出現才能匹配多級目錄

?.js 能匹配 a.js,b.js,c.js

a?? 能匹配 a.b,abc,但不能匹配ab/,由於它不會匹配路徑分隔符

[xyz].js 只能匹配 x.js,y.js,z.js,不會匹配xy.js,xyz.js等,整個中括號只表明一個字符

[^xyz].js 能匹配 a.js,b.js,c.js等,不能匹配x.js,y.js,z.js

 

 

gulp.dest 方法用來寫入文件（設置生成文件的路徑）

gulp.dest(path[,options])

path 爲寫入文件的路徑。

options 爲可選參數，一般不須要用到。

 

var gulp = require('gulp');

gulp.task('mytask', function() {

    gulp.src("./js/a.js")

           .pipe(gulp.dest("./dist/"));

});

讀取文件流（gulp.src），經過管道（pipe），把文件流寫入（gulp.dest）當前目錄下的 dist 文件夾中

 

 

gulp.watch 方法用來監視文件的變化

gulp.watch(globs[, opts], tasks)

globs 爲要監視的文件匹配模式，規則和用法與gulp.src()方法中的globs相同。

opts 爲可選參數，一般不須要用到。

tasks 爲文件變化後要執行的任務，爲一個數組

 

gulp.watch()還有另一種使用方式：

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

cb 參數爲一個函數。每當監視的文件發生變化時，就會調用這個函數,而且會給它傳入一個對象，該對象包含了文件變化的一些信息。

gulp.watch('./**/*.*', function(event){

    console.log(event.type); //added爲新增，deleted爲刪除，changed爲改變

    console.log(event.path); //變化的文件路徑

});

 

 

Gulp經常使用插件

 

文件合併（js、css）

使用gulp-concat

安裝：npm install --save-dev gulp-concat

gulp.task('concat', function () {

    gulp.src('./js/*.js') //要合併的文件

    .pipe(concat('all.js')) //合併匹配到的js文件並命名爲 "all.js"

    .pipe(gulp.dest('./dist/'));

});

 

js文件壓縮

使用gulp-uglify

安裝：npm install --save-dev gulp-uglify

gulp.task('minifyJS', function () {

    gulp.src('./dist/all.js') // 要壓縮的js文件

    .pipe(uglify()) //使用uglify進行壓縮

    .pipe(gulp.dest('./dist/js')); //壓縮後的路徑

});

 

css文件壓縮

使用gulp-minify-css

安裝：npm install --save-dev gulp-minify-css

gulp.task('minifyCss', function () {

    gulp.src('./css/*.css') // 要壓縮的css文件

    .pipe(minifyCss()) //壓縮css

    .pipe(gulp.dest('./dist/'));

});

 

重命名

使用gulp-rename

安裝：npm install --save-dev gulp-rename

gulp.task('rename', function () {

    gulp.src('./js/jquery-1.8.3.js')

    .pipe(uglify()) //壓縮

    .pipe(rename('jquery-1.8.3.min.js'))//重命名

    .pipe(gulp.dest('./js/'));

});

 

html文件壓縮

使用gulp-minify-html

安裝：npm install --save-dev gulp-minify-html

gulp.task('minifyHtml', function () {

    gulp.src('./test.html') //要壓縮的html文件

    .pipe(minifyHtml()) //壓縮

    .pipe(gulp.dest('./dist/'));

});

 

less編譯

使用gulp-less

安裝：npm install --save-dev gulp-less

var gulp = require('gulp'),

      less = require("gulp-less");

gulp.task('compile-less', function () {

    gulp.src('./less/*.less')

    .pipe(less())

    .pipe(gulp.dest('./dist/'));

});

 

sass編譯

使用gulp-sass

安裝：npm install --save-dev gulp-sass

var gulp = require('gulp'),

      sass = require("gulp-sass");

gulp.task('compile-sass', function () {

    gulp.src('./sass/*.sass')

    .pipe(sass())

    .pipe(gulp.dest('./dist/'));

});

 

圖片壓縮

使用gulp-imagemin

安裝：npm install --save-dev gulp-imagemin

gulp.task('imagemin', function () {

    gulp.src('./img/*') // 要壓縮的圖片

    .pipe(imagemin()) // 壓縮

    .pipe(gulp.dest('./dist/'));

});

 

ES6轉ES5

使用gulp-babel

安裝：npm install --save-dev gulp-babel @babel/core @babel/preset-env

gulp.task('es6', function () {

    gulp.src('./es6-class.js')

    .pipe(babel({ presets: ['@babel/preset-env'] }))

    .pipe(gulp.dest('./dist/'))

});

 

瀏覽器自動刷新

使用browser-sync

安裝：npm install --save-dev browser-sync

var server = require('browser-sync').create();//執行函數返回對象

gulp.task('server',function(){

    server.init({

        server:"./",

        port:3002

    });

    gulp.watch('./*.html').on('change',server.reload);

});

 

自動加載

使用gulp-load-plugins

安裝：npm install --save-dev gulp-load-plugins

var gulp = require('gulp');

var plugins = require('gulp-load-plugins')(); //加載並立刻運行它

而後咱們要使用gulp-rename和gulp-ruby-sass這兩個插件的時候，就可使用plugins.rename和plugins.rubySass來代替了,也就是原始插件名去掉gulp-前綴，以後再轉換爲駝峯命名。

實質上gulp-load-plugins是爲咱們作了以下的轉換:

plugins.rename = require('gulp-rename');

plugins.rubySass = require('gulp-ruby-sass');