前端自動化建構（gulp）

- - 安裝gulp
  - 本地gulp
  - 建立Gulpfile.js
  - 流的使用
  - 使用Gulp插件
  - 鍊式調用
  - 重置檔案
  - 順序和并行執行task
  - 建立服務

安裝gulp

//全局安裝
npm i gulp-cli -g

//本地安裝
npm i gulp

//檢測版本
gulp --version

本地gulp

本地Gulp有兩個作用：

加載和運作Gulpfile中的建構指令
暴露API供Gulpfile使用

本地Gulp是真正運作建構任務的程式，全局Gulp隻是用來啟動各個項目中的本地Gulp

建立Gulpfile.js

const gulp  = require("gulp");

//建立任務
gulp.task('test',()=>{
    console.log('Hello World!');
})

//執行任務
gulp test

task的具體流程

全局Gulp CLI加載本地Gulp
本地Gulp加載Gulpfile
Gulpfile加載本地Gulp，然後定義一個名為test的task
本地Gulp接收到一個指令參數，也就是要執行的task的名字
本地Gulp發現确實有一個task叫這個名字，于是執行了這個task所綁定的函數

流的使用

通過Gulp可以讀取檔案内容，然後把它轉換成特定的形式，最後把衆多js檔案合并成一個檔案。

讀：

gulp.src

寫：

gulp.dest

const gulp = require("gulp");

gulp.task('copy', () => {
    gulp.src('./index.html').pipe(gulp.dest('dist'))
})

gulp copy

這樣就會把檔案輸出到指定目錄，這個目錄是相對于Gulpfile所處的位置，目錄不存在則會建立

技巧：

有時候不知道檔案具體的名字，是以就可以使用glob來定義比對規則。
 app/*.html：這種隻有一個通配符，它隻能夠比對到app目錄下所有的html檔案
 app/**/*.html：有兩個通配符可以比對目錄中的0個或者多個子目錄，

使用Gulp插件

壓縮 npm i uglify

const gulp = require("gulp");
const uglify  = require("gulp-uglify");

gulp.task('scripts', () => {
    return gulp.src('./demo.js')
    .pipe(uglify())
    .pipe(gulp.dest('dist'))
})

合并 npm i gulp-concat

const gulp = require("gulp");
const uglify  = require("gulp-uglify");
const contact  = require("gulp-concat");

gulp.task('scripts', () => {
    return gulp.src('./src/*.js')
    .pipe(contact('bundle.js'))			//接受參數，合并後的檔案名
    .pipe(uglify())
    .pipe(gulp.dest('dist'))
})

鍊式調用

const gulp = require("gulp");
const uglify  = require("gulp-uglify");			//壓縮js
const conact  = require("gulp-concat");			//合并檔案
const less  = require("gulp-less");				//處理less
const minifyCSS  = require("gulp-cssnano");		//壓縮css
const prefix  = require("gulp-autoprefixer");	//自動添加浏覽器字首

gulp.task('scripts',()=>{
    return gulp.src('./src/*.js')
    .pipe(conact('main.min.js'))
    .pipe(uglify())
    .pipe(gulp.dest('dist/js'))
})

gulp.task('styles',()=>{
    return gulp.src('./src/index.less')
    .pipe(less())
    .pipe(minifyCSS())
    .pipe(prefix())
    .pipe(gulp.dest('dist/css'))
})

重置檔案

每次建構的時候清除上一次建構的檔案

const gulp = require("gulp");
const del  = require("del");

gulp.task('clean',()=>{
    return del(['dist'])	//調用之前引入的del包
})

del接受的第一個參數是一個數組，這個數組由要删除的檔案的比對規則構成

知識點：在執行任務的時候，需要結束task，

Did you forget to signal async completion?

，我之前都是用return來結束任務，同樣task接收一個done參數，最後執行這個回調函數

gulp.task('clean',(done)=>{
    done()
})

順序和并行執行task

順序 gulp.series ：這個函數用來順序執行task，它可以接受無限個參數，參數可以是字元串或者函數

const gulp = require("gulp");
const concat  = require("gulp-concat");
const del  = require("del");

gulp.task('clean',()=>{
    return del(['dist'])
})

gulp.task('scripts',
    gulp.series('clean',()=>{
        return gulp.src('./src/*.js')
        .pipe(concat('main.js'))
        .pipe(gulp.dest('dist'))
    })
)

//執行scripts時會先執行clean，這樣順序執行

并行 gulp.parallel ：會産生多個程序來同時執行task

代碼解讀：建立了一個新的任務，需要按順序先執行clean，然後在同步執行scripts、styles

gulp.task('default',
    gulp.series('clean',
        gulp.parallel('scripts','styles')
    )
)

前端自動化建構（gulp）

同時你可以在指令行中運作gulp來調用新的default task，Gulp會自動尋找default task并執行它

前端自動化建構（gulp）

建立服務

npm i browser-sync

代碼解釋：可以看出建立許多的task任務，怎麼把這些任務組合到一起很關鍵

在default這個任務中使用了gulp.series這個可以順序執行任務，接收多個參數，是以會首先執行clean任務删除檔案夾，然後并行執行styles、scripts、copy處理檔案，緊接着執行server任務開啟伺服器，最後執行watcher任務監聽檔案并執行對應的任務

注意：這裡使用了很多任務，每個任務需要使用done回調函數，不然會卡住，無法執行其它函數

const gulp = require("gulp");
const bSync  = require("browser-sync");
const del  = require("del");
const uglify  = require("gulp-uglify");			
const conact  = require("gulp-concat");			
const less  = require("gulp-less");				
const minifyCSS  = require("gulp-cssnano");		
const prefix  = require("gulp-autoprefixer");	

gulp.task('copy',()=>{
    return gulp.src('./src/index.html')
    .pipe(gulp.dest('dist'))
})

gulp.task('scripts',()=>{
    return gulp.src('./src/*.js')
    .pipe(conact('main.min.js'))
    .pipe(uglify())
    .pipe(gulp.dest('dist/js'))
})

gulp.task('styles',()=>{
    return gulp.src('./src/index.less')
    .pipe(less())
    .pipe(minifyCSS())
    .pipe(prefix())
    .pipe(gulp.dest('dist/css'))
})

//建立伺服器，管理dist檔案夾
//詳細配置請看官網 https://browsersync.io/
gulp.task('server',(done)=>{
    bSync({
        server:{
            baseDir:['dist']
        }
    })
    done()
})

gulp.task('clean',()=>{
    return del('dist')
})

gulp.task('watcher', (done) => {
    gulp.watch(['./src/*.js'],
        gulp.parallel('scripts')
    );
    gulp.watch(
      	'./src/index.less',
        gulp.parallel('styles')
    );
    gulp.watch(['./src/index.html'],
        gulp.parallel('copy')
    );
    gulp.watch(
        'dist/**/*',
        bSync.reload
    );
    done()
})

gulp.task('default',
    gulp.series(
        'clean',
        gulp.parallel('styles', 'scripts', 'copy'),
        'server',
        'watcher'
    )
)

前端自動化建構（gulp）