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}}這個格式的的內容替換成指定的字符