gulp

1.gulp是什么？

gulp是前端开发过程中一种基于流的代码构建工具，是自动化项目的构建利器；她不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用她，不仅可以很愉快的编写代码，而且大大提高我们的工作效率。

gulp是基于Nodejs的自动任务运行器， 她能自动化地完成 javascript、coffee、sass、less、html/image、css 等文件的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。在实现上，她借鉴了Unix操作系统的管道（pipe）思想，前一级的输出，直接变成后一级的输入，使得在操作上非常简单。

官网：http://gulpjs.com/

中文网： http://www.gulpjs.com.cn/

插件：http://gulpjs.com/plugins/

Gitbook：https://wizardforcel.gitbooks.io/gulp-doc/content/2.html

2.优点：

1.1.1 易于使用

通过代码优于配置的策略，gulp 让简单的任务简单，复杂的任务可管理。

1.1.2 构建快速

利用 Node.js 流的威力，你可以快速构建项目并减少频繁的 IO 操作。

1.1.3 易于学习

通过最少的 API，掌握 gulp 毫不费力，构建工作尽在掌握：如同一系列流管道。

1.1.4 插件高质

gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作。

3.gulp开始

(1)全局安装npm  install  –g  gulp

(2)安装到本地 npm install gulp –save-dev

(3)在项目根目录新建gulpfile.js

(4)编写文件内容并运行

var gulp = require('gulp');
gulp.task('default',function(){
    console.log('hello world');
});

(5)运行：

在根目录下打开命令窗口，输入gulp即可

（默认运行gulpfile.js文件）

4.globs语法

匹配符	说明
*	匹配文件路径中的0个或多个字符，但不会匹配路径分隔符，除非路径分隔符出现在末尾
**	匹配路径中的0个或多个目录及其子目录,需要单独出现，即它左右不能有其他东西了。如果出现在末尾，也能匹配文件。
?	匹配文件路径中的一个字符(不会匹配路径分隔符)
[...]	匹配方括号中出现的字符中的任意一个，当方括号中第一个字符为^或!时，则表示不匹配方括号中出现的其他字符中的任意一个，类似js正则表达式中的用法
!(pattern|pattern|pattern)	匹配任何与括号中给定的任一模式都不匹配的
?(pattern|pattern|pattern)	匹配括号中给定的任一模式0次或1次，类似于js正则中的(pattern|pattern|pattern)?
+(pattern|pattern|pattern)	匹配括号中给定的任一模式至少1次，类似于js正则中的(pattern|pattern|pattern)+
*(pattern|pattern|pattern)	匹配括号中给定的任一模式0次或多次，类似于js正则中的(pattern|pattern|pattern)*
@(pattern|pattern|pattern)	匹配括号中给定的任一模式1次，类似于js正则中的(pattern|pattern|pattern)

下面以例子来加深理解

* 能匹配 a.js,x.y,abc,abc/,但不能匹配a/b.js

*.* 能匹配 a.js,style.css,a.b,x.y

*/*/*.js 能匹配 a/b/c.js,x/y/z.js,不能匹配a/b.js,a/b/c/d.js

** 能匹配 abc,a/b.js,a/b/c.js,x/y/z,x/y/z/a.b,能用来匹配所有的目录和文件

**/*.js 能匹配 foo.js,a/foo.js,a/b/foo.js,a/b/c/foo.js

a/**/z 能匹配 a/z,a/b/z,a/b/c/z,a/d/g/h/j/k/z

a/**b/z 能匹配 a/b/z,a/sb/z,但不能匹配a/x/sb/z,因为只有单**单独出现才能匹配多级目录

?.js 能匹配 a.js,b.js,c.js

a?? 能匹配 a.b,abc,但不能匹配ab/,因为它不会匹配路径分隔符

[xyz].js 只能匹配 x.js,y.js,z.js,不会匹配xy.js,xyz.js等,整个中括号只代表一个字符

[^xyz].js 能匹配 a.js,b.js,c.js等,不能匹配x.js,y.js,z.js

Globs语法是匹配文件夹和文件路径的，和正则表达式类似，但是语法有区别，作用没有正则表达式强大

5.gulp核心api

1>gulp.task

  如果task的名称为default，默认执行该任务，不执行其他任务；

  如果要执行某个指定任务，输入gulp + 任务名；

任务依赖：

如果任务相互之间没有依赖，任务就会按你书写的顺序来执行，如果有依赖的话则会先执行依赖的任务。但是如果某个任务所依赖的任务是异步的，就要注意了，gulp并不会等待那个所依赖的异步任务完成，而是会接着执行后续的任务。

  第二个参数是任务的字符串数组，就是启动其他任务的作用，这几个任务是同时启动，但是谁先执行完得看任务里面的工作量，不是看启动任务的顺序

gulp.task('default',['a','b','c'],function(){
    console.log('默认任务')
});
gulp.task('a',function(){
    console.log('a任务')
});
gulp.task('b',function(){
    console.log('b任务')
});
gulp.task('c',function(){
    console.log('c任务')
});

gulp.task('default',['a','b'],function(){
console.log('默认任务')
});
gulp.task('a',function(){
console.log('a任务')
});
gulp.task('b',function(){
setTimeout(function(){
    console.log('b任务')
},3000)
});
//执行过程，先执行default，同时启动了a、b任务，再执行回调的console.log('默认任务')，但是b任务是异步任务，所以执行结果是：
a 默认任务 b 

如果想要a  b任务执行完后再执行default任务该怎么办？

有三种方法可以实现：

 

注意：推荐以后都在gulp.src前面写return 

 

2>gulp.src

 多文件：

3>gulp.dest

用gulp.dest()把文件流写入文件后，文件流仍然可以继续使用。

4>gulp.watch

6.插件

1>del:删除文件夹和文件

https://github.com/sindresorhus/del

2>gulp-concat：合并js文件

https://github.com/contra/gulp-concat

3>gulp-concat-css：合并css文件

https://github.com/mariocasciaro/gulp-concat-css

4>gulp-uglify：压缩js文件

https://github.com/terinjokes/gulp-uglify

5>gulp-cssnano:压缩css

https://github.com/ben-eb/gulp-cssnano

6>gulp-rename:重命名文件

https://github.com/hparra/gulp-rename

7>gulp-minify-html：压缩页面

https://github.com/sanfords/gulp-minify-html

8>gulp-imagemin：压缩图片

https://github.com/sindresorhus/gulp-imagemin

9>gulp-open:自动打开浏览器

https://github.com/stevelacy/gulp-open

10>gulp-notify：任务完成会自动提示，然后提示语消失

https://github.com/mikaelbr/gulp-notify

11>gulp-load-plugins:依赖自动加载(自动加载依赖插件的插件)

https://github.com/jackfranklin/gulp-load-plugins

12>gulp-livereload：自动刷新页面

https://github.com/vohof/gulp-livereload

类似插件：browser-sync(是一个大型的插件)

13>gulp-useref：有了这个插件，concat和gulp-concat插件就可以不用了

14>gulp-sass:处理sass文件

15>gulp-autoprefixer：自动处理前缀

   -moz火狐       -o欧朋        -webkit苹果和谷歌        -ms IE

16>gulp-sequence

var runSequence = require('run-sequence');

gulp-sequence:处理复杂的任务依赖问题，控制任务的启动，简化了任务的依赖关系

 注意：

      *:这个插件中写的任务得用cb或者是返回文件流

      *:简化了任务的依赖关系,控制了任务的启动流程

gulp.task('sequence',function(cb){
      gulpSequence('clean',['js','html','css',images'],'task1','task2');
     //执行流程：先执行clean，不管这个任务多大，都必须等它先执行完，
     //之后同时启动'js','html','css',images'，都执行完后再启动task1，
     //执行完后再启动执行task2
})

17>gulp-html-replace

一个完整的gulpfile.js

/**
 * gulp的默认配置文件，在这面写gulp的任务
 */
var gulp = require('gulp')
// 删除文件和文件夹插件
var del = require('del')
// 合并js插件
var concat = require('gulp-concat')
// 压缩混淆js插件
var uglify = require('gulp-uglify')
// 合并css插件
var concatCss = require('gulp-concat-css')
// 压缩css插件
var cssnano = require('gulp-cssnano')
// 重命名插件
var rename = require("gulp-rename")
// 压缩html插件
var minifyHTML = require('gulp-minify-html')
// 压缩图片插件
var imagemin = require('gulp-imagemin')
// 自动打开浏览器插件
var open = require('gulp-open')
// 消息通知插件
var notify = require("gulp-notify")
// 处理复杂的任务依赖问题
var gulpSequence = require('gulp-sequence')
// 处理sass文件
var sass = require('gulp-sass');
// 自动增加前缀
var autoprefixer = require('gulp-autoprefixer')
// 有了这个插件，concat和gulp-concat插件就可以不用了
var useref=require('gulp-useref')

// 1、名称如果叫default，那么这就是一个默认任务了，当你在一个命令窗口运行的gulp命令的时候，他会自动去找gulpfile.js文件中任务名称叫default的任务去执行
// 2、指定某一个任务去执行，命令就是gulp+任务名
// 3、第二个参数是一个任务的字符串数组，作用就是启动数组中相同名称的任务，不过这几个任务是同时启动的，谁先执行完得看任务里面的工作量，而不是按照顺序执行完毕

// =========================开发任务配置=============================//

// 定义开发配置
gulp.task('develop', ['sequence'], function () {
    gulp.src('dist/index.html')
        .pipe(open({app: 'chrome'}))
        .pipe(notify("项目构建完成！"))
});

// 定义文件变化的监听任务
gulp.task('watch', function () {
    // 一般在开发中这里要执行的是类似于scss，less，es6之类的监听构建
    gulp.watch('src/js/*.js', ['js'])
    gulp.watch('src/css/*.css', ['css'])
    gulp.watch('src/scss/*.scsss', ['scss','css'])
    gulp.watch('src/*.html', ['html'])
})


// brower-sync



// =========================部署任务配置=============================//
// 定义部署配置
gulp.task('build', ['sequence'], function () {
    gulp.src('dist/index.html')
        .pipe(open({app: 'chrome'}))
        .pipe(notify("项目构建完成！"))
});

gulp.task('sequence', function (cb) {
    // 1、这个插件中写得任务得用cb或者是返回文件流
    // 2、简化了任务的依赖关系，控制了任务启动流程
    gulpSequence('clean','scss','html',['js', 'css', 'image'], cb)
})

// =========================通用任务配置=============================//

// 定义文件夹的清空任务
gulp.task('clean', function (cb) {
    del(['dist']).then(function () {
        cb()
        console.log('清空了dist目录里面里面的东西')
    })
})

// 处理js文件
gulp.task('js', function () {
    var stream = gulp.src('src/js/*.js')
        // .pipe(concat('all.js'))
        .pipe(gulp.dest('dist/js'))
        .pipe(uglify())
        .pipe(rename({
            // dirname: 'dist/js',
            basename: "all",
            // prefix: "bonjour-",
            suffix: ".min",
            extname: ".js"
        }))
        .pipe(gulp.dest('dist/js'))
    return stream
})

// 处理css文件
gulp.task('css', function () {
    var stream = gulp.src('src/css/*.css')
        .pipe(autoprefixer({
            browsers: ['last 2 versions'],
            cascade: false
        }))
        // .pipe(concatCss('all.css'))
        .pipe(gulp.dest('dist/css'))
        .pipe(cssnano())
        .pipe(rename({
            // dirname: 'dist/css',
            basename: "all",
            // prefix: "bonjour-",
            suffix: ".min",
            extname: ".css"
        }))
        .pipe(gulp.dest('dist/css'))
    return stream
})

// 处理sass文件
gulp.task('sass', function () {
    return gulp.src('src/sass/*.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest('src/css'));
});


// 处理html插件
gulp.task('html', function () {
    var stream = gulp.src('src/*.html')
        .pipe(useref())
        .pipe(minifyHTML())
        .pipe(gulp.dest('dist'))
    return stream
})

// 压缩图片插件
gulp.task('image', function () {
    var stream = gulp.src('src/images/*.*')
        .pipe(imagemin())
        .pipe(gulp.dest('dist/images'))
    return stream
})