简单介绍一下

一种前端自动化构建工具，方便对一堆前端文件进行批量处理，比如：

• js压缩,var x,xname，混淆
• 合并
• css压缩
• html压压缩

其常见的框架grunt,webpack...等，为什么要使用gulp呢，主要是轻量，简单的批处理完全够用。

官网
中文网

gulp的安装

使用npm进行安装

npm install gulp-cli -g #全局安装gulp命令行

核心概念

管道流水线pipe
gulp处理文件就像是流水线一样，写好处理功能，然后使用.pipe()连接组装，最后，放入task来实现。

task
gulp中是一个个任务的形式来实现功能。

task('任务名',function(){
    //.....
});

src
对要处理的文件路径的指定

src('./*.js')

dest
指定处理后的文件的输出路径.

dest('./minjs/')

watch

watch('./*.js',['任务名1','任务名2']);

run
执行指定的任务。

run('任务名');

开始使用

1. 在要使用项目位置中通过npm非全局安装gulp

npm install gulp --save-dev

2. 还需要在当前项目根目录添加一个gulpfile.js文件来写具体的任务代码,参考如下：

var gulp = require('gulp');
var rev = require('gulp-rev');
var revReplace = require('gulp-rev-replace');
var useref = require('gulp-useref');
var filter = require('gulp-filter');
var zip = require('gulp-zip');
var clean = require('gulp-clean');

gulp.task('clean-dist', function () {
  return gulp.src('dist', {read: false})
        .pipe(clean());
});

gulp.task('copy',  function() {
  return gulp.src(['src/**/*', '!**/*.js'])
    .pipe(gulp.dest('dist/h5'))
});

gulp.task("rev", function() {
  var indexHtmlFilter = filter(['**/*', '!**/index.html'], { restore: true });

  return gulp.src(["src/*.js","src/**/*.js","src/**/*.html"])
    .pipe(useref())      // Concatenate with gulp-useref
    .pipe(indexHtmlFilter)
    .pipe(rev())                // Rename the concatenated files (but not index.html)
    .pipe(indexHtmlFilter.restore)
    .pipe(revReplace())         // Substitute in new filenames
    .pipe(gulp.dest('dist/h5'));
});

gulp.task('zip', () =>
    gulp.src('dist/**/*')
        .pipe(zip('h5.zip'))
        .pipe(gulp.dest('dist'))
);

gulp.task('default', ['copy', 'rev']);

gulp的一些插件

也是使用npm安装

• 对js代码进行压缩 gulp-uglify
• 对代码进行合并 gulp-concat
• 对css进行压缩 gulp-cssnano
• 对html进行压缩 gulp-htmlmin

举个例子gulpfile.js

var fileinclude = require('gulp-file-include');

// 引用其他文件
function fileincludeTask() {
    return gulp
        .src('main/*.html')
        .pipe(fileinclude({
            prefix: '@@',
            basepath: '@file'
        }))
        .pipe(gulp.dest('dist'));
}

exports.fileincludeTask = fileincludeTask;

命令行

gulp fileincludeTask #执行任务