gulp 實例 demo

今天專門拿一個小頁面來當 demo 來測試一下 gulp 的實際應用。過程中自然是各種小問題陸續呈現、各種自我需求不斷促使去完善。目前折騰出一個爲自己所需的、較爲完整的 demo ，準備當作後續模板改編應用。

走一次順序：

局部安裝

新建目錄 gulp_test ，並在該目錄下局部安裝 gulp ：

npm install gulp --save-dev

局部安裝完後，目錄 gulp_test 下出現文件夾 node_modules 。

安裝插件

所需要的插件簡介：

//引入組件
var gulp = require('gulp'),
    imagemin = require('gulp-imagemin'),        //圖片壓縮
    // sass = require('gulp-ruby-sass'),          //sass
    minifycss = require('gulp-minify-css'),    //css壓縮
    // jshint = require('gulp-jshint'),           //js檢查
    uglify = require('gulp-uglify'),          //js壓縮
    rename = require('gulp-rename'),           //重命名
    concat = require('gulp-concat'),          //合併文件
    clean = require('gulp-clean');            //清空文件夾
    htmlmin = require('gulp-htmlmin');        //html 處理

目錄 gulp_test 下安裝插件：

npm install gulp-minify-css gulp-concat gulp-uglify gulp-imagemin gulp-clean gulp-rename gulp-htmlmin --save-dev

安裝完插件後，目錄 node_modules 下多了7個插件的相應文件夾。

創建項目目錄結構

1. 在項目根目錄 gulp_test 下，新建 gulpfile.js 文件；
2. 在項目根目錄 gulp_test 下，新建文件夾 src ,用於存放生產環境代碼，並把自己的項目代碼放進去；
3. 在項目根目錄 gulp_test 下，新建文件夾 dist ,用於存放被 gulp 處理過的發佈環境代碼；
   此時的項目代碼結構爲：

編輯 gulpfile.js 文件

直接上 code ，裏面有詳細註釋：

//引入組件
var gulp = require('gulp'),
    imagemin = require('gulp-imagemin'),        //圖片壓縮
    // sass = require('gulp-ruby-sass'),          //sass
    minifycss = require('gulp-minify-css'),    //css壓縮
    // jshint = require('gulp-jshint'),           //js檢查
    uglify = require('gulp-uglify'),          //js壓縮
    rename = require('gulp-rename'),           //重命名
    concat = require('gulp-concat'),          //合併文件
    clean = require('gulp-clean');            //清空文件夾
    htmlmin = require('gulp-htmlmin');        //html 處理

//css 壓縮
gulp.task('minifycss',function() {
    var cssSrc = './src/css/.css',
        cssDst = './dist/css';
    return gulp.src(cssSrc)                  //被壓縮的文件
        .pipe(rename({ suffix: '.min' }))
        .pipe(minifycss())                       //執行壓縮
        .pipe(gulp.dest(cssDst));        //輸出文件夾
});

// 圖片處理
gulp.task('imagemin',function(){
    var imgSrc = './src/images/',
        imgDst = './dist/images';
    return gulp.src(imgSrc)
        .pipe(imagemin())
        .pipe(gulp.dest(imgDst));
});

// js處理
gulp.task('uglify',function () {
    var jsSrc = './src/js/.js',
        jsDst ='./dist/js';

    return gulp.src(jsSrc)
        /.pipe(jshint('.jshintrc'))
        .pipe(jshint.reporter('default'))/
        // .pipe(concat('main.js'))
        // .pipe(gulp.dest(jsDst))
        .pipe(rename({ suffix: '.min' }))
        .pipe(uglify())
        .pipe(gulp.dest(jsDst));
});

//html 處理
gulp.task('htmlmin', function () {
    var options = {
        removeComments: true,//清除HTML註釋
        collapseWhitespace: true,//壓縮HTML
        collapseBooleanAttributes: true,//省略布爾屬性的值 <input checked="true"/> ==> <input />
        removeEmptyAttributes: true,//刪除所有空格作屬性值 <input id="" /> ==> <input />
        removeScriptTypeAttributes: true,//刪除<script>的type="text/javascript"
        removeStyleLinkTypeAttributes: true,//刪除<style>和<link>的type="text/css"
        minifyJS: true,//壓縮頁面JS
        minifyCSS: true//壓縮頁面CSS
    };
    var htmlSrc = './src/.html',
        htmlDst = './dist';
    gulp.src(htmlSrc)
        .pipe(htmlmin(options))
        .pipe(gulp.dest(htmlDst));//同名的html,會直接替換
});

// clean被執行時,先清空對應目錄下圖片、樣式、js
gulp.task('clean',function() {
    return gulp.src(['./dist/css', './dist/js', './dist/images'], {read: false})
        .pipe(clean());
});

//watch
// gulp.watch('./src/css/.css', ['minifycss']);
gulp.task('watch',function(){
    //css
    gulp.watch('./src/css/.css', ['minifycss']);
    //css
    gulp.watch('./src/js/.js', ['uglify']);
    //css
    gulp.watch('./src/images/', ['imagemin']);
    //css
    gulp.watch('./src/*.html', ['htmlmin']);
});

// 默認預設任務 清空圖片、樣式、js並重建 運行語句 gulp
gulp.task('default', ['clean'],function(){
    gulp.start('minifycss','uglify','imagemin','htmlmin','watch');
});

執行 gulp

在根目錄下，執行命令：

gulp

成功之後，會在 dist 文件夾下生成已經被處理過各文件；
命令行顯示如下、並且一直監視 watch 着指定的文件是否改動保存過：

guojc@LAPTOP-LJ1HC4HN /F/GulpProjects/gulp_test
$ gulp
[22:41:55] Using gulpfile f:\GulpProjects\gulp_test\gulpfile.js
[22:41:55] Starting 'clean'...
[22:41:55] Finished 'clean' after 16 ms
[22:41:55] Starting 'default'...
[22:41:55] Starting 'minifycss'...
[22:41:55] Starting 'uglify'...
[22:41:55] Starting 'imagemin'...
[22:41:55] Starting 'htmlmin'...
[22:41:55] Finished 'htmlmin' after 2.17 ms
[22:41:55] Starting 'watch'...
[22:41:55] Finished 'watch' after 39 ms
[22:41:55] Finished 'default' after 59 ms
[22:41:57] Finished 'minifycss' after 1.45 s
[22:41:57] Finished 'uglify' after 1.55 s
[22:41:57] gulp-imagemin: Minified 17 images (saved 22.24 kB - 43%)
[22:41:57] Finished 'imagemin' after 2.09 s

此時的目錄結構，原本爲空的文件夾 dist 目錄，裏面出現了被 gulp 處理過各文件。

遇到的一些問題

• 安裝完gulp後，運行gulp。提示’gulp’ 不是內部或外部命令，也不是可運行的程序或批處理文件。嘗試下npm install -g gulp //全局安裝gulp。
  
• 各任務 task 是異步執行的，出現過報錯，大概是文件不存在、無法處理；只要在各任務 task 的 pipe管道 前加上 return 即可。
• 將多個監視放在一個任務 task裏面時，忘記把該名爲 watch 的任務 task 放在：默認預設任務 default 的數組裏面；導致文件修改保存後沒被監視到。
• 注意 dist 和 src 中代碼裏的引用的路徑、文件名的問題。

更多 gulp 的使用，還得繼續在實踐應用中摸索啦！

轉載地址：http://gjincai.github.io/2016/03/15/gulp-%E5%AE%9E%E4%BE%8B-demo/