gulp

时间 2019-11-30

标签 gulp 栏目 JavaScript 繁體版

原文原文链接

1.gulp是什么？

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

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

官网：http://gulpjs.com/html

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

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

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

2.优势：

1.1.1 易于使用

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

1.1.2 构建快速

利用 Node.js 流的威力，你能够快速构建项目并减小频繁的 IO 操做。github

1.1.3 易于学习

经过最少的 API，掌握 gulp 绝不费力，构建工做尽在掌握：如同一系列流管道。web

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')

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

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

// 定义开发配置
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) {
    // 一、这个插件中写得任务得用cb或者是返回文件流
    // 二、简化了任务的依赖关系，控制了任务启动流程
    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
})