gulp

1.gulp是什麼？

gulp是前端開發過程當中一種基於流的代碼構建工具，是自動化項目的構建利器；她不只能對網站資源進行優化，並且在開發過程當中不少重複的任務可以使用正確的工具自動完成；使用她，不只能夠很愉快的編寫代碼，並且大大提升咱們的工做效率。

gulp是基於Nodejs的自動任務運行器， 她能自動化地完成 javascript、coffee、sass、less、html/image、css 等文件的測試、檢查、合併、壓縮、格式化、瀏覽器自動刷新、部署文件生成，並監聽文件在改動後重復指定的這些步驟。在實現上，她借鑑了Unix操做系統的管道（pipe）思想，前一級的輸出，直接變成後一級的輸入，使得在操做上很是簡單。

官網：http://gulpjs.com/

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

插件：http://gulpjs.com/plugins/

Gitbook：https://wizardforcel.gitbooks.io/gulp-doc/content/2.html

2.優勢：

1.1.1 易於使用

經過代碼優於配置的策略，gulp 讓簡單的任務簡單，複雜的任務可管理。

1.1.2 構建快速

利用 Node.js 流的威力，你能夠快速構建項目並減小頻繁的 IO 操做。

1.1.3 易於學習

經過最少的 API，掌握 gulp 絕不費力，構建工做盡在掌握：如同一系列流管道。

1.1.4 插件高質

gulp 嚴格的插件指南確保插件如你指望的那樣簡潔高質得工做。

3.gulp開始

(1)全局安裝npm  install  –g  gulp

(2)安裝到本地 npm install gulp –save-dev

(3)在項目根目錄新建gulpfile.js

(4)編寫文件內容並運行

var gulp = require('gulp');
gulp.task('default',function(){
    console.log('hello world');
});

(5)運行：

在根目錄下打開命令窗口，輸入gulp便可

（默認運行gulpfile.js文件）

4.globs語法

匹配符	說明
*	匹配文件路徑中的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

Globs語法是匹配文件夾和文件路徑的，和正則表達式相似，可是語法有區別，做用沒有正則表達式強大

5.gulp核心api

1>gulp.task

  若是task的名稱爲default，默認執行該任務，不執行其餘任務；

  若是要執行某個指定任務，輸入gulp + 任務名；

任務依賴：

若是任務相互之間沒有依賴，任務就會按你書寫的順序來執行，若是有依賴的話則會先執行依賴的任務。可是若是某個任務所依賴的任務是異步的，就要注意了，gulp並不會等待那個所依賴的異步任務完成，而是會接着執行後續的任務。

  第二個參數是任務的字符串數組，就是啓動其餘任務的做用，這幾個任務是同時啓動，可是誰先執行完得看任務裏面的工做量，不是看啓動任務的順序

gulp.task('default',['a','b','c'],function(){
    console.log('默認任務')
});
gulp.task('a',function(){
    console.log('a任務')
});
gulp.task('b',function(){
    console.log('b任務')
});
gulp.task('c',function(){
    console.log('c任務')
});

gulp.task('default',['a','b'],function(){
console.log('默認任務')
});
gulp.task('a',function(){
console.log('a任務')
});
gulp.task('b',function(){
setTimeout(function(){
    console.log('b任務')
},3000)
});
//執行過程，先執行default，同時啓動了a、b任務，再執行回調的console.log('默認任務')，可是b任務是異步任務，因此執行結果是：
a 默認任務 b 

若是想要a  b任務執行完後再執行default任務該怎麼辦？

有三種方法能夠實現：

 

注意：推薦之後都在gulp.src前面寫return 

 

2>gulp.src

 多文件：

3>gulp.dest

用gulp.dest()把文件流寫入文件後，文件流仍然能夠繼續使用。

4>gulp.watch

6.插件

1>del:刪除文件夾和文件

https://github.com/sindresorhus/del

2>gulp-concat：合併js文件

https://github.com/contra/gulp-concat

3>gulp-concat-css：合併css文件

https://github.com/mariocasciaro/gulp-concat-css

4>gulp-uglify：壓縮js文件

https://github.com/terinjokes/gulp-uglify

5>gulp-cssnano:壓縮css

https://github.com/ben-eb/gulp-cssnano

6>gulp-rename:重命名文件

https://github.com/hparra/gulp-rename

7>gulp-minify-html：壓縮頁面

https://github.com/sanfords/gulp-minify-html

8>gulp-imagemin：壓縮圖片

https://github.com/sindresorhus/gulp-imagemin

9>gulp-open:自動打開瀏覽器

https://github.com/stevelacy/gulp-open

10>gulp-notify：任務完成會自動提示，而後提示語消失

https://github.com/mikaelbr/gulp-notify

11>gulp-load-plugins:依賴自動加載(自動加載依賴插件的插件)

https://github.com/jackfranklin/gulp-load-plugins

12>gulp-livereload：自動刷新頁面

https://github.com/vohof/gulp-livereload

相似插件：browser-sync(是一個大型的插件)

13>gulp-useref：有了這個插件，concat和gulp-concat插件就能夠不用了

14>gulp-sass:處理sass文件

15>gulp-autoprefixer：自動處理前綴

   -moz火狐       -o歐朋        -webkit蘋果和谷歌        -ms IE

16>gulp-sequence

var runSequence = require('run-sequence');

gulp-sequence:處理複雜的任務依賴問題，控制任務的啓動，簡化了任務的依賴關係

 注意：

      *:這個插件中寫的任務得用cb或者是返回文件流

      *:簡化了任務的依賴關係,控制了任務的啓動流程

gulp.task('sequence',function(cb){
      gulpSequence('clean',['js','html','css',images'],'task1','task2'); //執行流程：先執行clean，無論這個任務多大，都必須等它先執行完，
 //以後同時啓動'js','html','css',images'，都執行完後再啓動task1，
 //執行完後再啓動執行task2 })

17>gulp-html-replace

 

 

 

 

 

一個完整的gulpfile.js

/**
 * gulp的默認配置文件，在這面寫gulp的任務
 */
var gulp = require('gulp')
// 刪除文件和文件夾插件
var del = require('del')
// 合併js插件
var concat = require('gulp-concat')
// 壓縮混淆js插件
var uglify = require('gulp-uglify')
// 合併css插件
var concatCss = require('gulp-concat-css')
// 壓縮css插件
var cssnano = require('gulp-cssnano')
// 重命名插件
var rename = require("gulp-rename")
// 壓縮html插件
var minifyHTML = require('gulp-minify-html')
// 壓縮圖片插件
var imagemin = require('gulp-imagemin')
// 自動打開瀏覽器插件
var open = require('gulp-open')
// 消息通知插件
var notify = require("gulp-notify")
// 處理複雜的任務依賴問題
var gulpSequence = require('gulp-sequence')
// 處理sass文件
var sass = require('gulp-sass');
// 自動增長前綴
var autoprefixer = require('gulp-autoprefixer')
// 有了這個插件，concat和gulp-concat插件就能夠不用了
var useref=require('gulp-useref')

// 一、名稱若是叫default，那麼這就是一個默認任務了，當你在一個命令窗口運行的gulp命令的時候，他會自動去找gulpfile.js文件中任務名稱叫default的任務去執行
// 二、指定某一個任務去執行，命令就是gulp+任務名
// 三、第二個參數是一個任務的字符串數組，做用就是啓動數組中相同名稱的任務，不過這幾個任務是同時啓動的，誰先執行完得看任務裏面的工做量，而不是按照順序執行完畢

// =========================開發任務配置=============================//

// 定義開發配置
gulp.task('develop', ['sequence'], function () {
    gulp.src('dist/index.html')
        .pipe(open({app: 'chrome'}))
        .pipe(notify("項目構建完成！"))
});

// 定義文件變化的監放任務
gulp.task('watch', function () {
    // 通常在開發中這裏要執行的是相似於scss，less，es6之類的監聽構建
    gulp.watch('src/js/*.js', ['js'])
    gulp.watch('src/css/*.css', ['css'])
    gulp.watch('src/scss/*.scsss', ['scss','css'])
    gulp.watch('src/*.html', ['html'])
})


// brower-sync



// =========================部署任務配置=============================//
// 定義部署配置
gulp.task('build', ['sequence'], function () {
    gulp.src('dist/index.html')
        .pipe(open({app: 'chrome'}))
        .pipe(notify("項目構建完成！"))
});

gulp.task('sequence', function (cb) {
    // 一、這個插件中寫得任務得用cb或者是返回文件流
    // 二、簡化了任務的依賴關係，控制了任務啓動流程
    gulpSequence('clean','scss','html',['js', 'css', 'image'], cb)
})

// =========================通用任務配置=============================//

// 定義文件夾的清空任務
gulp.task('clean', function (cb) {
    del(['dist']).then(function () {
        cb()
        console.log('清空了dist目錄裏面裏面的東西')
    })
})

// 處理js文件
gulp.task('js', function () {
    var stream = gulp.src('src/js/*.js')
        // .pipe(concat('all.js'))
        .pipe(gulp.dest('dist/js'))
        .pipe(uglify())
        .pipe(rename({
            // dirname: 'dist/js',
            basename: "all",
            // prefix: "bonjour-",
            suffix: ".min",
            extname: ".js"
        }))
        .pipe(gulp.dest('dist/js'))
    return stream
})

// 處理css文件
gulp.task('css', function () {
    var stream = gulp.src('src/css/*.css')
        .pipe(autoprefixer({
            browsers: ['last 2 versions'],
            cascade: false
        }))
        // .pipe(concatCss('all.css'))
        .pipe(gulp.dest('dist/css'))
        .pipe(cssnano())
        .pipe(rename({
            // dirname: 'dist/css',
            basename: "all",
            // prefix: "bonjour-",
            suffix: ".min",
            extname: ".css"
        }))
        .pipe(gulp.dest('dist/css'))
    return stream
})

// 處理sass文件
gulp.task('sass', function () {
    return gulp.src('src/sass/*.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest('src/css'));
});


// 處理html插件
gulp.task('html', function () {
    var stream = gulp.src('src/*.html')
        .pipe(useref())
        .pipe(minifyHTML())
        .pipe(gulp.dest('dist'))
    return stream
})

// 壓縮圖片插件
gulp.task('image', function () {
    var stream = gulp.src('src/images/*.*')
        .pipe(imagemin())
        .pipe(gulp.dest('dist/images'))
    return stream
})