Gulp實戰(二)

一.配置環境

1.基於NodeJs安裝Git,npm,gulp

2.安裝各種插件

3.參考文檔

• http://www.tuicool.com/articles/UbaqyyJ
• http://www.tuicool.com/articles/QzaqAbF
• http://www.gulpjs.com.cn/docs/api/
• http://www.javashuo.com/article/p-tniksaof-bw.html

 

二.測試項目結構

三.配置文件代碼

var gulp = require('gulp'),
    del = require('del'), //刪除文件/文件夾
    gulpif = require('gulp-if'),
    gulpSequence = require('gulp-sequence'), //gulp順序執行任務插件
    imagemin = require('gulp-imagemin'), //壓縮圖片文件（包括PNG、JPEG、GIF和SVG圖片）
    cache = require('gulp-cache'), //gulp的緩存代理
    concat = require('gulp-concat'); //多個文件合併成一個
var nano = require('gulp-cssnano'), ////刪除空白和註釋，而且壓縮代碼
    postcss = require("gulp-postcss"), //css預編譯器
    sprites = require('postcss-sprites').default, //CSS精靈
    autoprefixer = require('autoprefixer'), //自動補全瀏覽器兼容性前綴
    cssgrace = require('cssgrace'); //CSS後處理工具,hackIE
var uglify = require('gulp-uglify'); //經過UglifyJS來壓縮JS文件
var rev = require('gulp-rev'), //對文件名加MD5後綴
    revCollector = require('gulp-rev-collector'); //這個插件就是從manifests中獲取靜態資源版本數據, 該數據由不一樣的流產生, 而且替換html中的連接.
var minifyHtml = require('gulp-minify-html'); //壓縮HTML文件
var usemin = require('gulp-usemin'), //用來將HTML 文件中（或者templates/views）中沒有優化的script 和stylesheets 替換爲優化過的版本
    livereload = require('gulp-livereload'),
    notify = require('gulp-notify');
var SRC_DIR = './src/';
var DST_DIR = './dist/';
var condition = true;
gulp.task('clean', function() {
    return del(['dist']);
});

/**
 * 壓縮圖片
 */
gulp.task('min-img', function() {
    gulp.src(SRC_DIR + '/img/*.{png,jpg,gif,ico}')
        .pipe(cache(imagemin({ //從緩存中讀取,OK,只針對修改後的圖片  
            optimizationLevel: 5, //類型：Number  默認：3  取值範圍：0-7（優化等級）
            progressive: true, //類型：Boolean 默認：false 無損壓縮jpg圖片
            interlaced: true, //類型：Boolean 默認：false 隔行掃描gif進行渲染
            multipass: true, //類型：Boolean 默認：false 屢次優化svg直到徹底優化
            svgoPlugins: [{ removeViewBox: false }], //不要移除svg的viewbox屬性
            progressive: true
        })))
        .pipe(gulp.dest(DST_DIR + '/img')); //輸出目錄
});

/**
 * 壓縮CSS
 */
gulp.task("min-css-pc", function() {
    // PostCSS
    var processors = [
        sprites({
            'stylesheetPath': SRC_DIR + '/css/',
            'spritePath': DST_DIR + '/img/'
        }),
        autoprefixer({
            browsers: ['> 1%', 'last 2 versions', 'ie 6-11']
        }),
        cssgrace
    ];
    return gulp.src([SRC_DIR + '/css/**/*.css'])
        .pipe(nano({
            discardComments: {
                removeAll: true
            }
        }))
        .pipe(postcss(processors))
        .pipe(gulp.dest(DST_DIR + '/css/'));
});

/**
 * 壓縮JS
 */
gulp.task('min-js', function() {
    return gulp.src(SRC_DIR + '/js/**/*.js')
        .pipe(uglify())
        .pipe(gulp.dest(DST_DIR + '/js/'));
});

/*
 * 壓縮並版本化JS
 */
gulp.task('rev-min-js', function() {
    return gulp.src(SRC_DIR + '/js/**/*')
        .pipe(concat('all.min.js'))
        .pipe(uglify())
        .pipe(rev())
        .pipe(gulp.dest(DST_DIR + '/js/'))
        .pipe(rev.manifest())
        .pipe(gulp.dest(DST_DIR + '/rev/js'));
});

/**
 * 壓縮版本化CSS
 */
gulp.task("rev-min-css", function() {
    // PostCSS
    var processors = [
        sprites({
            'stylesheetPath': SRC_DIR + '/css/',
            'spritePath': DST_DIR + '/img/'
        }),
        autoprefixer({
            browsers: ['> 1%', 'last 2 versions', 'ie 6-11']
        }),
        cssgrace
    ];
    return gulp.src([SRC_DIR + '/css/**/*.css'])
        .pipe(concat('all.min.css')) //合併後的文件
        .pipe(nano({
            discardComments: {
                removeAll: true
            }
        }))
        .pipe(rev()) //版本化
        .pipe(postcss(processors)) //雪碧圖生成,瀏覽器前綴自動補齊,IE hacker
        .pipe(gulp.dest(DST_DIR + '/css/'))
        .pipe(rev.manifest())
        .pipe(gulp.dest(DST_DIR + '/rev/css'));
});

/**
 * 壓縮HTML引入版本號文件
 */
gulp.task('rev-min-html', function() {
    return gulp.src([DST_DIR + '/rev/**/*.json', SRC_DIR + '/view/**/*.html'])
        .pipe(revCollector())
        .pipe(gulpif(
            condition, minifyHtml({
                empty: true,
                spare: true,
                quotes: true
            })
        ))
        .pipe(gulp.dest(DST_DIR + '/view'));
});

/*
 * PC打包方案
 */
gulp.task('pc', gulpSequence(
    'clean', 'min-img', 'rev-min-css', 'rev-min-js', 'rev-min-html'
));


gulp.task('default', ['pc'], function() {
    // return del(['tmp/']);
});

四.效果

• cmd運行命令gulp