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/
• https://segmentfault.com/a/1190000002932998

 

二.测试项目结构

三.配置文件代码

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