gulp自動化構建項目

1. 介紹

gulp.js是一個自動化構建工具，開發者可使用它在項目開發過程當中自動執行常見任務。Gulp是基於Node.js構建的，利用 Node.js 流的威力，你能夠快速構建項目並減小頻繁的 I/O 操做。Gulp.js 源文件和你用來定義任務的 Gulp 文件都是經過 JavaScript源碼來實現的。

Gulp側重於前端開發的整個過程的控制管理（像是流水線），咱們能夠經過給gulp配置不一樣的task（經過Gulp中的gulp.task()方法配置，好比啓動server、sass/less預編譯、文件的合併壓縮等等）來讓gulp實現不一樣的功能，從而構建整個前端開發流程。

2.引入

首先gulp是依賴在node環境下的。關於Node的環境安裝這裏就不在贅述。

2.1 全局安裝

全局安裝gulp：

npm install -g gulp
複製代碼

2.2 做爲項目開發依賴安裝

首先初始化package.json

npm init -y
複製代碼

在項目中安裝gulp

npm i --save-dev gulp // --save-dev或者—D都表示做爲開發依賴進行安裝
複製代碼

**注意：**全局安裝的gulp只是讓您的系統（電腦）增長了一個叫作gulp的命令，這個命令會調用當前目錄下的 gulpfile.js 文件，並根據該文件的內容來執行相應的任務，而真正起到提供API功能的倒是本地安裝的gulp。

3.安裝插件

gulp所處理的任務大多都是以插件的形式存在的，因此在使用前，須要先安裝咱們須要的一些插件到項目中

這裏列舉一些經常使用的插件：

• gulp-rename：重命名文件
• gulp-concat：合併文件
• gulp-filter：過濾文件
• gulp-uglify：壓縮Js
• gulp-csso：壓縮優化CSS
• gulp-html-minify：壓縮HTML
• gulp-imagemin：壓縮圖片
• gulp-zip:zip壓縮文件
• gulp-autoprefixer：自動爲css添加瀏覽器前綴
• gulp-sass：編譯sass
• gulp-babel：將ES6代碼編譯成ES5

這裏將本文所用到的插件都安裝進去：

cnpm i gulp gulp-less gulp-sass gulp-imagemin gulp-concat gulp-connect gulp-content-includer gulp-jslint gulp-minify-css gulp-uglify gulp-watch gulp-rename gulp-autoprefixer gulp-run-sequence -S-dev
複製代碼

這裏能夠看到package.json中已經有了相關依賴

"dependencies": {
    "gulp": "^4.0.2",
    "gulp-autoprefixer": "^7.0.1",
    "gulp-concat": "^2.6.1",
    "gulp-connect": "^5.7.0",
    "gulp-content-includer": "^0.0.7",
    "gulp-imagemin": "^7.1.0",
    "gulp-jslint": "^1.0.10",
    "gulp-less": "^4.0.1",
    "gulp-minify-css": "^1.2.4",
    "gulp-rename": "^2.0.0",
    "gulp-run-sequence": "^0.3.2",
    "gulp-sass": "^4.1.0",
    "gulp-uglify": "^3.0.2",
    "gulp-watch": "^5.0.1"
  }
}
複製代碼

3.1 建立gulpfile.js文件

該文件須要配置在項目根目錄下，做用是配置Gulp。文件名必須爲gulpfile.js，不然沒法執行。

接着咱們能夠學習幾個關於gulp的api，方便咱們繼續往下看：

// 定義一個 task,聲明它的名稱, 任務依賴, 和任務內容.
gulp.task(name[, deps], fn)

// 讀取文件,參數爲文件路徑字符串或數組, 支持通配符.
gulp.src(globs[, options])

// 寫入文件, 做爲pipe的一個流程.文件夾不存在時會被自動建立.
gulp.dest(path[, options])

// 監控文件,執行任務.
gulp.watch(glob [, opts], tasks) or gulp.watch(glob [, opts, cb])
複製代碼

建立一個簡單的實例：

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

想要執行只須要在終端輸入：gulp default/gulp（名稱爲default時可省略名稱）

學習完後咱們來正式開始配置一些複雜的任務。

3.2 導入插件

const GulpClient = require("gulp");
const autoPrefixer = require("gulp-autoprefixer");
const less = require("gulp-less");
const minifyCSS = require("gulp-minify-css");
const rename = require("gulp-rename");
const sass = require('gulp-sass');
const concat = require('gulp-concat');
const GulpUglify = require("gulp-uglify");
const imagemin = require("gulp-imagemin");
const runsequence = require('gulp-run-sequence');
const connect = require('gulp-connect');
複製代碼

3.3 編譯less文件

須要用到的插件：

// 編譯less文件
GulpClient.task('less',() => {
    return GulpClient.src('./css/**/*.less')
    .pipe(less())//編譯less
    .pipe(minifyCSS())//簡化css
    .pipe(autoPrefixer({
        overrideBrowserslist: ['last 2 version'], // 兼容最新的兩個版本
        cascade: false
    }))
    .pipe(rename({
        suffix: '.min' // 將壓縮後的css文件名添加上.min
    }))
    .pipe(GulpClient.dest('dist/css'))
})
複製代碼

3.4 編譯sass文件

GulpClient.task('sass',() => {
    return GulpClient.src('./css/**/*.{sass,scss}')
    .pipe(sass())
    .pipe(minifyCSS())
    .pipe(rename({
        suffix:'.min'
    }))
    .pipe(GulpClient.dest('dist/css'))
})
複製代碼

3.5 壓縮css代碼

GulpClient.task('css',() => {
    return GulpClient.src('./css**/*.css')
    .pipe(minifyCSS())
    .pipe(rename({
        suffix:'.min'
    }))
    .pipe(GulpClient.dest('dist/css'))
})
複製代碼

3.6 壓縮js代碼

GulpClient.task('js',() => {
    return GulpClient.src('./js/**/*.js')
    .pipe(concat('vender.js'))//合併
    .pipe(GulpUglify())//醜化
    .pipe(GulpClient.dest('./dist/js'))//目標文件
})
複製代碼

3.7 壓縮圖片

GulpClient.task('images',() => {
    return GulpClient.src('./img/**/*.{jpg,png,gif}')
    .pipe(imagemin())//壓縮圖片
    .pipe(GulpClient.dest('./dist/img'))
})
複製代碼

3.8 輸出數據（json/xml等）

GulpClient.task('data',() => {
    return GulpClient.src('./data/**/*.{json,xml}')
    .pipe(GulpClient.dest('./dist/data'))
})
複製代碼

3.9 複製index.html文件到產品目錄dist下

GulpClient.task('copy-index',() => {
    return GulpClient.src('index.html')
    .pipe(GulpClient.dest('./dist/'))
})
複製代碼

4. 編譯全部文件（執行全部任務）

直接在終端運行gulp build便可

GulpClient.task('build',GulpClient.series(['less','sass','css','js','images','data','copy-index','html']),() => {
    runsequence('concat');
    console.log('編譯成功');
})
複製代碼

4.1 自動監視

GulpClient.task('watch',async () => {
    GulpClient.watch('./css/**/*.less',GulpClient.series(['less']))
    GulpClient.watch('./css/**/*.{sass,scss}',GulpClient.series(['sass']))
    GulpClient.watch('./css**/*.css',GulpClient.series(['css']))
    GulpClient.watch('./js/**/*.js',GulpClient.series(['js']))
    GulpClient.watch('./img/**/*.{jpg,png,gif}',GulpClient.series(['images']))
    GulpClient.watch('./data/**/*.{json,xml}',GulpClient.series(['data']))
    GulpClient.watch('index.html',GulpClient.series(['copy-index']))
    GulpClient.watch('./html/**/*.html',GulpClient.series(['html']))
})

複製代碼

4.2 在服務端啓動

GulpClient.task('server',async () => {
    connect.server({
        root:'dist',
        livereload:'true'//熱加載
    })
})
複製代碼

4.3 設置自動化

GulpClient.task('default',GulpClient.series('build','server'))
複製代碼