Gulp 插件及其使用

　　前端现在有很多的自动打包工具，各有优缺点，而gulp作为其中的一员，也有着很受人们的青睐，简单粗暴，然而gulp本身并没有提供很多的API,真正的一些工作则是靠着插件完成的，本文简单介绍一些常用的gulp插件及其使用。

//文件包含 
//学习链接 https://www.npmjs.com/package/gulp-file-include
var fileInclude = require('gulp-file-include');
//示例：
var fileinclude = require('gulp-file-include'),
gulp = require('gulp');
//读取index.html并替换其中还@@include,模板可以传变量，详情见以上链接进行学习
gulp.task('fileinclude', function() {
  gulp.src(['index.html'])
    .pipe(fileinclude({
      prefix: '@@',
      basepath: '@file'
    }))
    .pipe(gulp.dest('./'));
});

//压缩js插件
var uglify = require('gulp-uglify');
//示例：
/**
 * 对js文件进行处理：压缩 注意：requirejs中变量名称不能在压缩时被修改，否则会导致requirejs失效
 */
gulp.task('dealJs', [ "clean" ], function() {
    gulp.src('src/**/*.js').pipe(uglify({
        mangle : false
    // 类型：Boolean 默认：true 是否修改变量名
    })) // 压缩js
    .pipe(gulp.dest(''));
});
//压缩Css文件
var minifyCss = require('gulp-minify-css');
//示例/**
 * 对js文件进行处理：压缩
 */
gulp.task('dealCss', [ "clean" ], function() {
    gulp.src('src/**/*.css').pipe(minifyCss()) // 压缩css
    .pipe(gulp.dest(''));
});
//压缩html
var htmlmin = require('gulp-htmlmin');
//示例：
//链接：http://www.ydcss.com/archives/20
var gulp = require('gulp'),
    htmlmin = require('gulp-htmlmin');
 
gulp.task('testHtmlmin', 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
    };
    gulp.src('src/html/*.html')
        .pipe(htmlmin(options))
        .pipe(gulp.dest('dist/html'));
});
//删除文件或文件夹
var del = require('del');

//使用示例:
var gulp = require('gulp');
var del = require('del');

gulp.task('clean:mobile', function (cb) {
  del([
    'dist/report.csv',
    // 这里我们使用一个通配模式来匹配 `mobile` 文件夹中的所有东西
    'dist/mobile/**/*',
    // 我们不希望删掉这个文件，所以我们取反这个匹配模式
    '!dist/mobile/deploy.json'
  ], cb);
});

gulp.task('default', ['clean:mobile']);
//gulp-replace ,可以替换指定格式的字符到指定字符，例如：

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

// 遍历所有的词条，替换文件流中存在的词条
    for (var i = 0; i < words.length; i++) {
        stream = stream.pipe(replace("${I18N[" + words[i] + "]}",                    getEnWord(words[i])));
    }
就会把${I18N{admin.test}}这个格式的的内容替换成指定的字符