gulp实践

一、环境搭建

1、全局安装gulp：$ npm install --global gulp
2、项目依赖安装：$ npm install --save-dev gulp
3、在项目根目录下创建一个名为 gulpfile.js 的文件：

var gulp = require('gulp');

gulp.task('default', function() {
  // 将你的默认的任务代码放在这
});

4、运行 gulp：在命令行输入gulp会执行‘default’任务

二、gulp API介绍

1、gulp.src(globs[, options])

输出（Emits）符合所提供的匹配模式（glob）或者匹配模式的数组（array of globs）的文件。将返回一个 Vinyl files 的 stream 它可以被 piped到别的插件中。

gulp.src('client/templates/*.js')
  .pipe(gulp.dest('build/minified_templates'));

2、gulp.dest(path[, options])

能被 pipe 进来，并且将会写文件。并且重新输出（emits）所有数据，因此你可以将它 pipe 到多个文件夹。如果某文件夹不存在，将会自动创建它。

gulp.src('client/templates/*.js')
  .pipe(gulp.dest('./build/templates'));

3、gulp.task(name[, deps], fn)

定义一个使用 Orchestrator 实现的任务（task）。

gulp.task('somename', function() {
  // 做一些事
});

4、gulp.watch(glob[, opts], tasks)

监视文件，并且可以在文件发生改动时候做一些事情。它总会返回一个 EventEmitter 来发射（emit） change 事件。

var watcher = gulp.watch('js/**/*.js', ['uglify','reload']);
watcher.on('change', function(event) {
  console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
});

三、开始gulp应用
1、gulp html打包

/**
 * 根目录下的html文件
 *collapseWhitespace: true,
 *collapseBooleanAttributes: false,
 *removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />
 *removeScriptTypeAttributes: false,//删除<script>的type="text/javascript"
 *removeStyleLinkTypeAttributes: false,//删除<style>和<link>的type="text/css"
 *minifyJS: true,//压缩页面JS
 *minifyCSS: true//压缩页面CSS
 */
gulp.task('minifyHTML', function (cb) {
    var options = {
        removeComments: true,
        collapseWhitespace: true,
        collapseBooleanAttributes: false,
        removeEmptyAttributes: true,
        removeScriptTypeAttributes: false,
        removeStyleLinkTypeAttributes: false,
        minifyJS: true,
        minifyCSS: true
    };

    pump([
        gulp.src(['*.html', '!index.html', '!template.html']),
        fileinclude({    //解决html文件中用include引入的模块
            prefix: '@@',
            basepath: '@file'
        }),
        htmlmin(options),
        gulp.dest('dist/'),
        connect.reload() //热更新
    ], cb)
});

2、gulp js打包

gulp.task('minifyJs', ['cleanJs'] , function (cb) {
    pump([
        gulp.src([`env/gulpfile.${process.env.ENV}.js`, 'app.js', 'js/**/*.js', 'js/*.js']),
        uglify({ mangle: false }),
        concat('all.js'),
        ngAnnotate(),
        rev(),                   //添加版本号
        gulp.dest('dist/js'),    
        rev.manifest(),
        gulp.dest('rev/js'),     //生成版本号映射文件
    ],cb)
})

3、gulp image打包

/**
 * 图片压缩
 * optimizationLevel：类型：Number  默认：3  取值范围：0-7（优化等级） 
 * progressive: 类型：Boolean 默认：false 无损压缩jpg图片 
 * interlaced: 类型：Boolean 默认：false 隔行扫描gif进行渲染 
 * multipass: 类型：Boolean 默认：false 多次优化svg直到完全优化 
 * svgoPlugins: [{ removeViewBox: false }] 不要移除svg的viewbox属性 
 */
gulp.task('image', function () {
    var imgOption = {
        optimizationLevel: 5,
        progressive: true,
        interlaced: true,
        multipass: true,
        svgoPlugins: [{ removeViewBox: false }]
    };
    gulp.src(['image/**/*'])
        .pipe(imagemin({ progressive: true }))
        .pipe(gulp.dest('dist/image'))
        .pipe(connect.reload())
})

四、gulp很简单，但gulp插件太多，需根据需求来配置，使用方式也很简单，npm上会有使用说明及实例，在这里介绍一下以下插件：

var gulp = require("gulp"),//gulp基础包 
    rename = require("gulp-rename"),//重命名 
    imagemin = require('gulp-imagemin'),//图片压缩 
    autoprefixer = require('gulp-autoprefixer'),//补充前缀 
    notify = require('gulp-notify'),//提示信息
    jshint = require('gulp-jshint'),//js检测
    clean = require('gulp-clean'),//清楚文件
    htmlmin = require('gulp-htmlmin'),//html压缩 
    concat = require("gulp-concat"),//合并js 
    cssmin = require('gulp-cssmin'),//压缩css
    sourcemaps = require('gulp-sourcemaps'),
    uglify = require("gulp-uglify"),//压缩js 
    ngAnnotate = require('gulp-ng-annotate'),//angular依赖 
    pump = require('pump'),//错误报告到具体的文件
    fileinclude = require('gulp-file-include'),//打包时倒入文件中include引入的文件
    concatCss = require('gulp-concat-css'),//合并css
    postcss = require('gulp-postcss'),//自动生成前缀
    autoprefixer = require('autoprefixer'),//postcss参数，兼容主流浏览器两个版本，是否美化属性值
    connect = require('gulp-connect'),//实现热更新
    rev = require('gulp-rev'), //生成版本号
    revCollector = require('gulp-rev-collector'),//根据映射文件替换html文件中的资源路劲
    open = require('gulp-open');//引入open模块，注意不是gulp-open

有需求的朋友可以一起研究讨论......

猜你喜欢