gulp前端项目构建示例

项目结构：

root
|--dist
|--node_modules
|--src
|	|-css
|	|-fonts
|	|-img
|	|-js
|	|-index.html
|--gulpfile.js
|--package.json

清理 dist 目标文件夹

插件：del

$ npm install del --save-dev

var del = require('del');

gulp.task('del',function(){
    del('./dist');
})

HTML/CSS合并

插件：gulp-useref

安装： $ npm install gulp-useref --save-dev

说明：gulp-useref 作用是把 HTML 页面中的 javascript/CSS 引入合并成一个文件，不过它只负责合并，不负责压缩！

用法：gulp-useref 识别的是 build 开头的注释，build 后面首先跟的是类型扩展名，再后面是所有文件合并后的新文件路径，这是相对于 HTML 的相对路径。

修改src目录 html 源文件：

<!-- build:css css/main.css -->
<link rel="stylesheet" href="css/custom.css">
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/zerow.css" />
<!-- endbuild -->

<!-- build:js js/main.js -->
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/service.js"></script>
<script src="js/zerow.js"></script>
<!-- endbuild -->

将多个 CSS 引用合并为一个main.css，将多个 js 引用合并为一个main.js。

var useref = require('gulp-useref');

gulp.task('useref',function(){
    return gulp.src('src/index.html')
    .pipe(useref())
    .pipe(gulp.dest('dist'))
})

处理后的源文件：src/index.html，输出目录：dist，HTML 文件内容：

<html>
<head>
    <link rel="stylesheet" href="css/main.css"/>
</head>
<body>
    <script src="scripts/main.js"></script> 
</body>
</html>

HTML/CSS压缩

上面的gulp-useref只会合并文件，但是不会执行压缩，压缩 JS 我们选择 gulp-uglify，压缩 CSS 选择 gulp-clean-css(gulp-minify-css is deprecate)，同时再安装一个插件： gulp-if，执行任务时，自动判断压缩 CSS 和 JS 时需使用的插件。

安装：$ npm install gulp-if gulp-clean-css gulp-uglify --save-dev

var gulpIf = require('gulp-if');
var cleanCSS = require('gulp-clean-css');
var uglify = require('gulp-uglify');

gulp.task('useref',function(){
    return gulp.src('src/index.html')
    .pipe(useref())
    .pipe(gulpIf('*.css',cleanCSS()))
    .pipe(gulpIf('*.js',uglify()))
    .pipe(gulp.dest('dist'))
})

这样生成的 main.min.js 和 main.min.css 都是经过压缩的。

HTML压缩

插件：gulp-htmlmin（gulp-html-minify is deprecated）

安装：$ cnpm install gulp-htmlmin --save-dev

var htmlmin=require('gulp-htmlmin');

gulp.task('useref',function(){
    var options = {
        collapseWhitespace:true,//清除空格
        collapseBooleanAttributes:true,//省略bool值，如<input checked="checked"/>变成<input checked/>
        removeComments:true,//清除注释
        removeEmptyAttributes:true,//清除空属性
        removeScriptTypeAttributes:true,//清除js脚本的type="text/javascript"
        removeStyleLinkTypeAttributes:true,//清除link样式表的type属性
        minifyJS:true,//压缩html内的js
        minifyCSS:true  //压缩html内的css
    };
    return gulp.src('src/index.html')
    .pipe(useref())
    .pipe(gulpIf('*.html',htmlmin(options)))
    .pipe(gulpIf('*.css',cleanCSS()))
    .pipe(gulpIf('*.js',uglify()))
    .pipe(gulp.dest('dist'))
})

图片压缩

插件：gulp-imagemin

安装：$ npm install gulp-imagemin --save-dev

var htmlmin=require('gulp-htmlmin');

gulp.task('imagemin',function(){
    return gulp.src('src/img/*.+(png|jpg|gif|svg)')
    .pipe(imagemin({
        optimizationLevel: 5, //类型：Number  默认：3  取值范围：0-7（优化等级）
        progressive: true, //类型：Boolean 默认：false 无损压缩jpg图片
        interlaced: true, //类型：Boolean 默认：false 隔行扫描gif进行渲染
        multipass: true //类型：Boolean 默认：false 多次优化svg直到完全优化
    }))
    .pipe(gulp.dest('dist/img'))
})

压缩图片缓存

图片较多的话，所有图片每次都要压缩处理比较耗费时间，使用 gulp-cache 插件就无需重复压缩，每次只会压缩修改过的图片，其它从缓存读取。

插件：gulp-cache

安装：$ npm install gulp-cache --save-dev

var imagecache=require('gulp-cache');

gulp.task('imagemin',function(){
    var options={
        optimizationLevel: 5,
        progressive: true,
        interlaced: true,
        multipass: true
    };
    return gulp.src('src/img/*.+(png|jpg|gif|svg)')
    .pipe(imagecache(imagemin({options})))
    .pipe(gulp.dest('dist/img'))
})

//可以添加一个清除缓存任务
gulp.task('clear', function(){
    	cache.clearAll()
	}
);