Gulp中文主頁
一個重要前提：gulp在4.0以后做了結(jié)構(gòu)上的調(diào)整，如果用3.x版本習(xí)慣的話，要回退到3.x版本，

  npm install gulp@3 --save-de

[TOC]

Gulp rumen

Gulp入門

1. 作用：
   前端項目構(gòu)建工具，基于nodejs的自動任務(wù)運行器，能自動完成javascript/coffee/sass/less/html/image/css等文件的合并、壓縮、檢查、監(jiān)聽文件變化、瀏覽器自動刷新、測試等任務(wù)
2. 特點：

• 任務(wù)化，
• 基于流（I/O）gulp將本地文件讀入gulp內(nèi)存，處理后在輸出到本地文件
• 異步/同步：通過return來實現(xiàn)異步

3. API

• gulp.src(filePath/pathArr)
  指向指定路徑的所有文件，返回文件流對象
  用于讀取文件
• gulp.dest(dirPath/pathArr)
  指向指定的所有文件夾
  用于向文件夾中輸出文件
• gulp.task(name, [deps], fn)
  定義一個任務(wù)
• gulp.watch()
  監(jiān)視文件的變化

4. gulp插件

• gulp-concat：合并文件（js/css）
• gulp-ugify：壓縮js文件
• gulp-rename：文件重命名
• gulp-less：編譯less
• gulp-clean-css： 壓縮css
• gulp-livereload：實時自動編譯刷新

Gulp實戰(zhàn)

1. 創(chuàng)建目錄：

└─src
    │  gulpfile.js
    │  index.html
    │  package.json
    │
    ├─css
    ├─js
    └─less

2. 創(chuàng)建gulpfile.js
   npm install gulp --save-dev
   npm install gulp-concat gulp-uglify gulp-rename --save-dev

var gulp = require("gulp");

//注冊任務(wù)
gulp.task("任務(wù)名", function () {
    //配置任務(wù)的操作

})
//注冊默認任務(wù)
gulp.task('default',['任務(wù)名'])

3. 合并js文件

js目錄下創(chuàng)建test1.js, test2.js
test1.js

(function () {
    function foo(num1, num2) {
        return num1 + num2
    }
    console.log(foo(22, 56))
})()

test2.js

(function () {
    var result = [1,2,3,4,5].map(function(item, index){
        return item+10
    })
    console.log(result)
})()

gulpfile.js
引入gulp-concat, gulp-uglify, gulp-rename, 分別對應(yīng)合并文件、壓縮文件和重命名文件

var concat = require('gulp-concat')
var uglify = require('gulp-uglify')
var rename = require('gulp-rename')

gulp.task('js', function () {
    return gulp.src('src/js/*.js') //找到目標文件，將數(shù)據(jù)讀取到gulp的內(nèi)存中
    .pipe(concat('build.js'))   //臨時合并文件為build.js
    .pipe(gulp.dest('dist/js/'))   //輸出到本地
    .pipe(uglify())   //壓縮文件
    .pipe(rename({suffix:'.min'}))  //重命名文件，加min前綴
    .pipe(gulp.dest('dist/js'))
})

注冊默認任務(wù)

gulp.task('default',[])

壓縮css和less

npm install gulp-less gulp-clean-css --save-dev

test1.css

#div1{
    width: 100px;
    height: 100px;
    background-color: red;
}

test2.css

#div2{
    width: 100px;
    height: 100px;
    background-color: bule;
}

test3.less

@base:yellow;
.index1{color: @base};
.index2{color: green;}

代碼：

//注冊轉(zhuǎn)換less的任務(wù)
gulp.task('less', function () {
    return gulp.src('src/less/*.less')
    .pipe(less())   //編譯less文件為css文件
    .pipe(gulp.dest('src/css/'))
})

壓縮css

//注冊合并壓縮css文件
gulp.task('css', function () {
    return gulp.src('src/css/*.css')
    .pipe(concat('build.css'))
    .pipe(rename({suffix:'.min'}))
    .pipe(cssClean({compatibility:'ie8'}))
    .pipe(gulp.dest('dist/css/'))
})

壓縮html

引入gulp-htmlmin

npm install gulp-htmlmin --save-dev

半自動構(gòu)建

引入gulp-livereload

npm install gulp-livereload --save-dev

注冊監(jiān)聽任務(wù)

//注冊監(jiān)視任務(wù)
gulp.task('watch', ['default'], function () {
    //開啟監(jiān)聽
    livereLoad.listen()
    //確認監(jiān)聽目標已經(jīng)綁定相應(yīng)的任務(wù)
    gulp.watch('src/js/*.js', ['js'])
    gulp.watch(['src/css/*.css','src/less/*.less'],['css'])
})

全自動構(gòu)建

引入插件
在需要監(jiān)聽的任務(wù)中加入

 .pipe(livereLoad()) //實時刷新

命令行執(zhí)行

$ gulp watch

[15:21:02] Using gulpfile C:\Workspace\Code\MyProject\Web\gulp_test\src\gulpfile.js
[15:21:02] Starting 'js'...
[15:21:02] Starting 'less'...
[15:21:02] Starting 'html'...
[15:21:02] Finished 'less' after 200 ms
[15:21:02] Starting 'css'...
[15:21:02] Finished 'html' after 205 ms
[15:21:02] Finished 'js' after 380 ms
[15:21:02] Finished 'css' after 216 ms
[15:21:02] Starting 'default'...
[15:21:02] Finished 'default' after 124 μs
[15:21:02] Starting 'watch'...
[15:21:02] Finished 'watch' after 102 ms

比如更改css文件，

[15:18:21] Starting 'css'...
[15:18:21] C:\Workspace\Code\MyProject\Web\gulp_test\src\dist\css\build.min.css reloaded.

自動加載對應(yīng)css文件

全自動構(gòu)建

引入插件, gulp-connect是創(chuàng)建一個小型服務(wù)器，open是用于自動在瀏覽器中打開地址

npm install gulp-connect --save-dev
npm install open --save-dev

全自動任務(wù)

//注冊全自動監(jiān)視任務(wù)
gulp.task('server',['default'], function () {
    //配置服務(wù)器的選項
    connect.server({
        root:'dist/',
        livereload:true,
        port:5000
    })
    gulp.watch('src/js/*.js', ['js'])
    gulp.watch(['src/css/*.css','src/less/*.less'],['css'])
})

open('http://localhost:5000/')

在需要監(jiān)聽的任務(wù)中加入：

.pipe(connect.reload()) //實時刷新

然后執(zhí)行

gulp server