Gulp快速上手

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 的任务（task）将会被运行，在这里，这个任务并未做任何事情。

API学习

1、gulp.src()

指定需要处理的源文件路径，返回当前文件流至可用插件。

gulp.src(path,options)

path:需要处理的源文件匹配路径，必填项，类型可以为String或StringArray。
path 通配符示例：

//匹配指定uinv.js文件
'src/uinv.js'
//匹配src目录下的多个文件
'src/*.js'
//匹配包含src的0个或多个子文件夹下的js文件
'src/**/*.js'
//{}匹配多个属性文件
//匹配包含a.js和b.js文件
'src/{a,b}.js'
//匹配src下所有jpg/png/gif文件
src/*.{jpg,png,gif}
//! 排除文件，不包含src下的uinv.js文件
'!src/uinv.js'

options 类型

• options.buffer:类型Boolean 默认true ，设置为false将返回file.content的流且不缓冲文件，处理大文件时有用。
• options.read:类型Boolean 默认true，设置为false，将不执行读取文件操作，返回null。
• options.base:类型 String 设置输出路径以某个路径的某个组成部分为基础向后拼接。

gulp.task('jsMin', function () {
  console.log('打包JS');
  return gulp.src('src/js/*.js',{base:'src'})
    .pipe(babel())
    .pipe(uglify())
    .pipe(gulp.dest('build'))	//写入路径：'build/js/uinv.js'
})

2、gulp.dest()

指定处理完后文件的输出路径。它可以将pipe到多个文件夹，如果某个文件夹不存在，将自动创建它。

gulp.dest(path[, options])

注意：文件被写入的路径是以所给的相对路径为目标路径来计算的，相对路径也可以根据所给的base路径来计算。

gulp.task('concatJS',function () {
  console.log('合并打包js文件');
  return gulp.src('src/js/*.js',{base:'src'})
    .pipe(babel())
    .pipe(uglify())
    .pipe(gulp.dest('build'))	//写入路径：'build/js/uinv.js'
    .pipe(concat('all.js',{newLine:';'}))
    .pipe(gulp.dest('build'))	//写入路径：'build/all.js'
})

path: 类型String 或 Function
文件将被写入的路径。也可以传入一个函数，在函数中返回相应的路径。
options：类型 Object

参数	类型	默认值	说明
options.cwd	String	process.cwd()	输出目录的 cwd 参数，只在所给的输出目录是相对路径时候有效。
options.mode	String	0777	八进制权限字符，用以定义所有在输出目录中所创建的目录的权限。

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

定义一个gulp任务。

参数	类型	默认值
name	String	任务的名字
deps	Array	一个包含任务列表的数组，这些任务会在你当前任务运行之前完成
fn	Function	该函数定义任务所要执行的操作

gulp.task('mytask', ['array','names'], function() {
  // 在array、names任务完成后，做一些事
});

一定要确保你所依赖的任务列表中的任务都使用了正确的异步执行方式

如果任务a需要依赖任务b的完成，那么任务a的task方法需要使用return返回stream。
gulp3.0版本以前写法

gulp.task('a', function () {
    return gulp.src(src/js/*.js)
        .pipe(babel())
    	.pipe(uglify())
        .pipe(gulp.dest('build'));
});
 
gulp.task('b', ['a'], function () { //执行完a任务后再执行b任务
    gulp.src(['css/*.css'])
        .pipe(minifyCss())
        .pipe(gulp.dest('./dist/css'));
});

gulp4.0版本写法

• gulp.series：按照顺序执行
• gulp.paralle：可以并行计算

gulp.task('my-tasks', gulp.series('a', 'b', 'c', function() {
  // Do something after a, b, and c are finished.
}));

 gulp.task('build', gulp.parallel('styles', 'scripts', 'images', function () {
  // Build the website.
}));

4、gulp.watch()

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

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

参数	类型	默认值
glob	String or Array	一个 glob 字符串，或者一个包含多个 glob 字符串的数组，用来指定具体监控哪些文件的变动。
opts	Object	传给gaze的参数
tasks	Array	文件变动后需要执行的task任务列表

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

gulp.watch(glob[, opts, cb])

参数	类型	默认值
glob	String or Array	一个 glob 字符串，或者一个包含多个 glob 字符串的数组，用来指定具体监控哪些文件的变动。
opts	Object	传给gaze的参数
cb	Function	每次变动后需要执行的callback

gulp.watch('js/**/*.js', function(event) {
  console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
});

callback 会被传入一个名为 event 的对象。这个对象描述了所监控到的变动：

• event.type : 类型String
  发生变动的类型：added、changed、deleted
• event.path: 类型Sting
  触发该事件的文件路径

常用插件

1、gulp-load-plugins

gulp-load-plugins这个插件能自动帮你加载package.json文件里的gulp插件。

我们可以在gulpfile.js中使用gulp-load-plugins来帮我们加载插件：

var gulp = require('gulp');
//加载gulp-load-plugins插件，并马上运行它
var plugins = require('gulp-load-plugins')();

gulp-load-plugins并不会一开始就加载所有package.json里的gulp插件，而是在我们需要用到某个插件的时候，才去加载那个插件。

1、重命名：gulp-rename

gulp.task('rename',function () {
  console.log('rename');
  return gulp.src('build/all.js')
      .pipe(rename('sai.js'))//用sai.js重新命名了all.js
      .pipe(gulp.dest('build'));//其实是重新生成了一个sai.js
});

2、js文件压缩：gulp-uglify

安装：npm install --save-dev gulp-uglify

gulp.task('jsMin', function () {
  console.log('打包JS');
  return gulp.src('src/js/*.js',{base:'src'})//要压缩的JS文件
    .pipe(uglify())//使用uglify进行压缩
    .pipe(gulp.dest('build'))
})

3、css 文件压缩：gulp-clean-css

gulp.task('cssMin',function () {
  console.log('打包CSS');
  return gulp.src('src/css/*.css')
    .pipe(cssmin({compatibilityL:'ie8'}))
    .pipe(gulp.dest('build/css'))
})

4、html 文件压缩：gulp-htmlmin

gulp.task('htmlMin1',function () {
  console.log('打包HTML');
  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
  };
  return gulp.src('src/html/*')
    .pipe(htmlmin(options))
    .pipe(gulp.dest('build/html'))
})

5、文件合并：gulp-concat

用来把多个文件合并为一个文件,我们可以用它来合并js或css文件等，这样就能减少页面的http请求数了

gulp.task('concatJS',function () {
  console.log('合并打包js文件');
  return gulp.src('src/js/*.js',{base:'src'})
    .pipe(uglify())
    .pipe(concat('all.js',{newLine:';'}))// 合并匹配到的js文件并命名为 "all.js"
    .pipe(gulp.dest('build'))
})

6、图片压缩：gulp-imagemin

gulp.task('imageMin',function () {
  console.log('打包image资源文件');
  return gulp.src('src/image/*')
    .pipe(imagemin())
    .pipe(gulp.dest('build/image'))
})

7、将ES6代码编译成ES5：gulp-babel

gulp.task('es6', function () {
  console.log('将ES6代码编译成ES5');
  return gulp.src('src/js/*.js',{base:'src'})
    .pipe(babel())
    .pipe(gulp.dest('build'))
})

8、删除文件：gulp-clean

gulp.task('clean',function () {
  console.log('清除文件');
  return gulp.src('build/*.js')
    .pipe(clean());
})

9、压缩zip包：gulp-zip

gulp.task('zip',function () {
  console.log('压缩文件');
  return gulp.src('build/**/*')
    .pipe(zip('project.zip'))
    .pipe(gulp.dest('out'));
})

10、给文件名添加hash值：gulp-rev

gulp.task('addHash',function () {
  console.log('添加hash值');
  return gulp.src('src/js/*.js')
    .pipe(rev())
    .pipe(gulp.dest('build/js'))
})

11、注入引用：gulp-inject

注入前HTML：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>all</title>
  <!-- inject:css -->
  <!-- endinject -->
</head>
<body>

<!-- inject:js -->
<!-- endinject -->
</body>
</html>

注入：

gulp.task('inject',function () {
  console.log('注入引用');
  var target = gulp.src('./src/index.html');
  var sources = gulp.src(['./src/js/*.js','./src/css/*.css'],{read:false});
  return target.pipe(inject(sources),{relative:true})
    .pipe(gulp.dest('./build'));
})

注入后：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>all</title>
  <!-- inject:css -->
  <link rel="stylesheet" href="/src/css/one.css">
  <link rel="stylesheet" href="/src/css/two.css">
  <!-- endinject -->
</head>
<body>

<!-- inject:js -->
<script src="/src/js/event.js"></script>
<script src="/src/js/one.js"></script>
<script src="/src/js/uinv.js"></script>
<!-- endinject -->
</body>
</html>

12、if：gulp-if

gulp.task('gulpif',function () {
  console.log('gulpif');
  return gulp.src('src/js/*.js')
    .pipe(babel())
    .pipe(gulpif(condition,uglify()))//如果condition为true，则进行丑化，否则不进行丑化
    .pipe(gulp.dest('build'))
})

13、sourceMap：gulp-sourcemaps

SourceMap 一个存储源代码与编译代码对应位置映射的信息文件。
主要用于解决代码打包压缩混淆后的调试问题。

gulp.task('sourcemaps',function () {
  return gulp.src('src/js/*.js')
    .pipe(sMsp.init())
    .pipe(babel())
    .pipe(gulpif(condition,uglify()))
    .pipe(sMsp.write('map'))
    .pipe(gulp.dest('build'))
})

14、gulp提示：gulp-notify

var notify = require("gulp-notify");
gulp.src("./src/test.ext")
  .pipe(notify("Hello Gulp!"));

参考文档：
baoyadong
官方
cuteximi_1995
gulp-inject
无双
陆路
Max_Law
阮一峰