使用gulp實現前端自動化

gulp是一個自動化構建工具，開發者能夠用它來自動執行一些常見的任務。這裏以我以前作的一個demo爲例，簡要介紹如何使用gulp實現前端工程自動化。css

項目結構

其中src目錄下表示的是項目的源代碼，能夠看到其中有less、js、html等，而dist目錄則是保存的是gulp編譯後生成的代碼，至關於生產環境。最後也最重要的是gulpfile.js，這個文件用於設置gulp相關的配置，相似於webpack中的webpack.config.js。html

安裝

這裏使用的gulp爲v3.9.1，語法和最新的v4.x有所出入，想學習最新的gulp語法，能夠參考gulp.js - The streaming build system 。前端

3.9.1 安裝以下：jquery

npm install --save-dev gulp
複製代碼

語法

gulp.task()用於定義一個gulp任務，在命令行中可使用gulp [任務名]開啓該任務。
gulp.src()會返回符合匹配的文件流，能夠被pipe()到其餘插件中。
gulp.dest()：輸出全部數據。
gulp.watch()用於監測文件的變更。

實踐

在這個項目中，有一些常見的需求，這裏使用gulp來實現自動化：webpack

less轉css
css壓縮合並
js壓縮合並
圖片壓縮

在gulpfile.js中首先須要導入gulp和一些經常使用的插件，本次demo使用到的插件以下：git

var gulp = require('gulp'),
    less = require('gulp-less'),                   //less 轉 css
    csso = require('gulp-csso'),                   //css壓縮
    concat = require('gulp-concat'),               //合併文件
    uglify = require('gulp-uglify'),               //js 壓縮
    jshint = require('gulp-jshint'),               //js 檢查
    clean = require('gulp-clean'),                 //清除文件
    imagemin = require('gulp-imagemin'),           //圖片壓縮
    rev = require('gulp-rev'),                     //添加版本號
    revReplace = require('gulp-rev-replace'),      //版本號替換
    useref = require('gulp-useref'),               //解析html資源定位
    gulpif = require('gulp-if'),                   //if語句
    connect = require('gulp-connect');             //建立web服務器
複製代碼

圖片壓縮

獲取到src下全部以.jpg或.png結尾的圖片，將其壓縮後輸出到dist目錄下。github

gulp.task('dist:img', () => {
    gulp.src(['./src/**/*.jpg', './src/**/*.png'])
    .pipe(imagemin())
    .pipe(gulp.dest('dist/'))
})
複製代碼

less壓縮合併爲css

先清除已存在的css，而後將src下以.less結尾的文件經過less()轉爲css文件，再經過csso()以及concat()實現對css的壓縮合並。web

gulp.task('dist:css', () => {
    gulp.src('dist/css/*.css').pipe(clean());
    return gulp.src('./src/less/*.less')
    .pipe(less())
    .pipe(csso())
    .pipe(concat('public.css'))
    .pipe(gulp.dest('dist/css/'));
});
複製代碼

js壓縮合並

js壓縮合並的過程大同小異，增長了一個jshint()代碼審查的過程，它會將不符合規範的錯誤代碼輸出到控制檯。npm

gulp.task('dist:js', () => {
    gulp.src('dist/js/*.js').pipe(clean());
    return gulp.src('./src/js/*.js')
    .pipe(jshint())
    .pipe(jshint.reporter('default'))
    .pipe(uglify())
    .pipe(concat('public.js'))
    .pipe(gulp.dest('dist/js/'))
});
複製代碼

less轉css

在開發過程當中，由於html不能直接引入.less文件，所以還須要生成開發環境的.css。json

gulp.task('src:css', () => {
    gulp.src('src/css/*.css').pipe(clean());
    return gulp.src('./src/less/*.less')
    .pipe(less())
    .pipe(gulp.dest('src/css/'));
});
複製代碼

添加版本號

爲了防止瀏覽器對文件進行緩存，須要對文件添加版本號，保證每次獲取到的都是最新的代碼。

gulp.task('revision', ['dist:css', 'dist:js'], () => {
    return gulp.src(["dist/css/*.css", "dist/js/*.js"])
    .pipe(rev())
    .pipe(gulpif('*.css', gulp.dest('dist/css'), gulp.dest('dist/js')))
    .pipe(rev.manifest())
    .pipe(gulp.dest('dist'))
})
gulp.task('build', ['dist:img'], () => {
    var manifest = gulp.src('dist/rev-manifest.json');
    return gulp.src('src/index.html')
    .pipe(revReplace({
        manifest: manifest
    }))
    .pipe(useref())
    .pipe(gulp.dest('dist/'))
})
複製代碼

在revision中，首先經過rev()對dist目錄下的.css/.js生成一個文件名帶版本號的文件，例如本例中public.css生成public-5c001c53f6.css，而後分別輸出到不一樣的目錄下，最後生成一個rev-manifest.json文件，存儲了原文件和帶版本號文件之間的映射關係，以下：

{
  "public.css": "public-5c001c53f6.css",
  "public.js": "public-93c275a836.js"
}
複製代碼

在build中，先獲取到rev-manifest.json中的對象，而後利用revReplace()來替換版本號，再使用useref()來進行資源的解析定位，最後輸出便可。

以引入js文件爲例，源html文件中對文件的引入則要改寫爲如下形式，即以註釋的形式寫入構建後生成的文件路徑，以下:

<!-- build:js ./js/public.js -->
<script src="./js/jquery-1.12.4.min.js"></script>
<script src="./js/myAlbum.js"></script>
<!-- endbuild -->
複製代碼

最後生成的html爲：

<script src="./js/public-93c275a836.js"></script>
複製代碼

具體的語法規則能夠參見gulp-useref。

建立本地服務器並實現自動刷新

使用connet.server()來建立一個本地服務器，利用gulp.watch()來對src下的文件進行監測，若是發生變化，則執行編譯less爲css和刷新頁面的任務。

gulp.task('connect', () => {
    connect.server({
        root: 'src',
        livereload: true,
        port: 8888
    })
})
gulp.task('reload', () => {
    gulp.src('src/*.html')
    .pipe(connect.reload())
})
gulp.task('watch', () => {
    gulp.watch('src/**/*', ['src:css', 'reload'])
})
複製代碼

完整的代碼能夠參見github。

原文地址：

使用gulp實現前端自動化