Gulp 插件及其使用

时间：2023-03-08 19:25:02
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}}这个格式的的内容替换成指定的字符

相关文章