gulp 4.0--前端构建工具基本环境搭建及使用

Gulp 是一个自动化工具,前端开发者可以使用它来处理常见任务:

搭建web服务器
文件保存时自动重载浏览器
使用预处理器如Sass,Less
优化资源,比如压缩CSS,JavaScript,压缩图片

和其他构建工具相比优势在于:

简洁
执行效率更高
与平台无关-集成被集成到所有主流IDE中.
强大的生态系统

"Automate and enhance your workflow" --gulp

一 gulp的安装

"基于node环境"

(1)、Node.js简介
简单的说 Node.js 就是运行在服务端的 JavaScript。Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。Node.js 的包管理器 npm，是全球最大的开源库生态系统。
(2) 下载Node.js
打开官网下载链接:https://nodejs.org/en/download/

在官网(https://nodejs.org/en/)下载pkg包,我下载的版本为6.9.5,大小为15.5M。下载的安装包双击下一步安装即可。

查看是否成功:

1.全局安装

npm install -g  gulp

2.项目安装,切换到项目目录安装

npm install gulp

如果需要把gulp写进项目

package.json文件的依赖中，则可以加上--save-dev

npm install --save-dev gulpinstall --save-dev gulp

查看 gulp版本

➜   gulp -version  [16:44:22] CLI version 2.0.116:44:22] CLI version 2.0.1

[16:44:22] Local version 4.0.016:44:22] Local version 4.0.0

安装4.0 gulp

npm install gulp@next -D

3.在项目根目录下创建一个名为gulpfile.js的文件

//这里是gulp 3.+版本写法

var gulp = require('gulp');

gulp.task('default',function(){

//将你的默认的任务代码放在这

});

//gulp 4.0

// 只需要在`series` 和 `parallel` 中间引用函数名就能组成一个新任务

gulp.task('local', gulp.series(clean, gulp.parallel(php, js), watch))

// 把单个任务变成一个函数

function clean() {

    return spawn('rm', ['-rf', Path[env]])

function php() {

    return gulp.src(Path.php.src, {since: gulp.lastRun(php)})

        .pipe(plumber())

        .pipe(gulp.dest(Path[env]))

        .pipe(livereload())

function js() {

    return gulp.src(Path.js.src, {since: gulp.lastRun(js)}).pipe(plumber()).pipe(gulp.dest(Path[env])).pipe(livereload())

function watch(done) {

    livereload.listen()

    gulp.watch('app/php/**/*.php', gulp.series(php))

    gulp.watch('app/js/**/*.js',  gulp.series(js))

    done()

这里有几点要注意的地方：
a.由于js是有函数定义提升的，函数的定义可以放在你定义default任务之后，不像之前说的，如果你要用一些小任务组成一个新任务的时候，你就必须要先定义那些小任务。这样就使得你可以在一开始就定义好实际要运行的任务，这样别人阅读起来也更方便一些，以免别人还要在翻阅了一堆其他任务代码后，才能发现藏在最后的实际要运行的那些。
b.styles, scripts, 和 clean 现在都相当于“私有”任务，他们无法通过gulp命令行来运行。
c.这样就没有那么多匿名函数了。
d.也没有那么多被引号包裹住的“任务”名了，这样意味着你可以通过你的代码编辑器/IDE帮你检查拼写错误，而不用在运行Gulp的时候才能发现错误。
e.即使把“任务”函数放在多个文件中定义，也能方便的把它们引用到同一个文件中，然后再通过gulp.task把它们变成实际可用的任务。
f.这些任务都是可以独立测试的（如果你要测试）而不需要gulp.

4.执行gulp任务

gulp defult

一般在Gulp4中，我们会在代码的最后才定义default，而在Gulp3中你可以把它放在任何地方。

最后总结一下，这是我推荐的Gulp4的最佳实践：

gulp.task('default', gulp.series(clean, gulp.parallel(scripts, styles)));

gulp.task('default').description = "This is the default task and it does certain things";

function styles() {...}

function scripts() {...}

function clean() {...}

运行gulp --tasks，你将会看到：

$ gulp --tasks

[12:00:00] Tasks for ~\localhost\gulp4test\gulpfile.js

[12:00:00] └─┬ default  This is the default task and it does certain things

[12:00:00]   └─┬ <series>

[12:00:00]     ├── clean

[12:00:00]     └─┬ <parallel>

[12:00:00]       ├── scripts12:00:00]       ├── scripts

[12:00:00]       └── styles

不仅有你添加的描述，你还能看到完整的运行队列树.

二. gulp api

- gulp.src() –全局匹配一个或多个文件

- gulp.dest() –将文件写入目录

- gulp.symlink() –与dest相似，但是使用软连接形式

- gulp.task() –定义任务

- gulp.lastRun() –获得上次成功运行的时间戳

- gulp.parallel() –并行运行任务

- gulp.series() –运行任务序列

- gulp.watch() –当文件发生变化时做某些操作

- gulp.tree() –获得任务书树

- gulp.registry() –获得或注册任务

官方说明API说明:

https://github.com/gulpjs/gulp/blob/master/docs/API.md

a.gulp.watch()

gulp.watch()用来监视文件的变化，当文件发生变化后，我们可以利用它来执行相应的任务，例如文件压缩等。其语法为

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

glob 为要监视的文件匹配模式，规则和用法与gulp.src()方法中的glob相同。
opts 为一个可选的配置对象，通常不需要用到
tasks 为文件变化后要执行的任务，为一个数组

b.gulp.task()

gulp.task方法用来定义任务，内部使用的是Orchestrator，其语法为：

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

name 为任务名
deps 是当前定义的任务需要依赖的其他任务，为一个数组。当前定义的任务会在所有依赖的任务执行完毕后才开始执行。如果没有依赖，则可省略这个参数
fn 为任务函数，我们把任务要执行的代码都写在里面。该参数也是可选的。

三.gulp 插件

a 自动加载插件

使用gulp-load-plugins
安装：

npm install --save-dev gulp-load-plugins

要使用gulp的插件，首先得用require来把插件加载进来，如果我们要使用的插件非常多，那我们的gulpfile.js文件开头可能就会是这个样子的：

var gulp = require('gulp'), //一些gulp插件,abcd这些命名只是用来举个例子

    a = require('gulp-a'),

    b = require('gulp-b'),

    c = require('gulp-c'),

    d = require('gulp-d'),

    e = require('gulp-e'),

    f = require('gulp-f'),

    g = require('gulp-g'),

    //更多的插件... z = require('gulp-z');

虽然这没什么问题，但会使我们的gulpfile.js文件变得很冗长，看上去不那么舒服。gulp-load-plugins插件正是用来解决这个问题。
gulp-load-plugins这个插件能自动帮你加载package.json文件里的gulp插件。例如假设你的package.json文件里的依赖是这样的:

{ "devDependencies":

{ "gulp": "~3.6.0",

    "gulp-rename": "~1.2.0",

        "gulp-ruby-sass": "~0.4.3",

            "gulp-load-plugins": "~0.5.1"

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

var gulp = require('gulp');

//加载gulp-load-plugins插件，并马上运行它

var plugins = require('gulp-load-plugins')();

然后我们要使用gulp-rename和gulp-ruby-sass这两个插件的时候，就可以使用plugins.rename和plugins.rubySass来代替了,也就是原始插件名去掉gulp-前缀，之后再转换为驼峰命名。
实质上gulp-load-plugins是为我们做了如下的转换

plugins.rename = require('gulp-rename');

plugins.rubySass = require('gulp-ruby-sass');

gulp-load-plugins并不会一开始就加载所有package.json里的gulp插件，而是在我们需要用到某个插件的时候，才去加载那个插件。
最后要提醒的一点是，因为gulp-load-plugins是通过你的package.json文件来加载插件的，所以必须要保证你需要自动加载的插件已经写入到了package.json文件里，并且这些插件都是已经安装好了的。

b. js文件压缩[3.+版本写法]

使用gulp-uglify
安装：

npm install --save-dev gulp-uglify

用来压缩js文件，使用的是uglify引擎

var gulp = require('gulp'),

    uglify = require("gulp-uglify");

gulp.task('minify-js', function () {

    gulp.src('js/*.js') // 要压缩的js文件

    .pipe(uglify())  //使用uglify进行压缩,更多配置请参考：

    .pipe(gulp.dest('dist/js')); //压缩后的路径

});

c. js代码检查[3.+版本写法]

使用gulp-jshint
安装：

npm install --save-dev gulp-jshint

用来检查js代码

var gulp = require('gulp'),

    jshint = require("gulp-jshint");

gulp.task('jsLint', function () {

    gulp.src('js/*.js')

        .pipe(jshint())

        .pipe(jshint.reporter()); // 输出检查结果

});

d.文件合并[3.+版本写法]

使用gulp-concat
安装：

npm install --save-dev gulp-concat

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

var gulp = require('gulp'),

    concat = require("gulp-concat");

gulp.task('concat', function () {

    gulp.src('js/*.js')  //要合并的文件

    .pipe(concat('all.js'))  // 合并匹配到的js文件并命名为 "all.js"

    .pipe(gulp.dest('dist/js'));

});