建立我的第一个Gulp项目

文/anMoo韩魔

图片来源网络

Gulp基于Node.js的自动化构建工具
Gulp运行效率比Grunt高，相比之下更有设计感

新建项目

在新建项目之前，电脑中需要安装全局的gulp插件，然后就可以在指定的项目文件中新建gulp项目了。

npm install -g gulp-cli

1. 文件夹下-打开终端

npm init - 输入项目名称等信息

(页面中所有引入的js和css都是引用dest文件夹下的压缩文件。)

2. 处理CSS

npm install -? (查看group install的命令)

安装css预处理的五个插件：gulp，gulp-sass，gulp-concat，gulp-minify-css，gulp-sourcemaps)

npm install --save-dev gulp gulp-sass gulp-concat gulp-minify-css gulp-sourcemaps

如果需要查看项目安装的所有插件，可以在package.json中的devDependencies中看到。
这需要安装插件的时候使用save-dev命令。
本项目中目前为止安装的插件如下：

安装的插件

3. 安装全局gulp插件

npm install -g gulp-cli

安装一个公用指令

4. 项目根目录下新建gulpfile.js文件
   在gulpfile.js文件中需要引用所有的插件，然后根据需要执行的操作新建任务。
   现在需要压缩所有.scss文件，代码如下：
   压缩.scss文件
   然后在命令行执行 gulp style，就可以看到所有文件已经转移到了dest文件夹下:
   文件转移
   说明我们的项目是完全可以执行的。
   然而我们需要的肯定不是单纯的文件转移，我们需要对样式文件进行编译。
   项目目录结构举例：
   项目目录结构

gulp.src(files[,options])
files: String Array, 必填，需要处理的文件匹配符路径
options: Object，选填，配置选项
base: String，输出路径的基底位置
buffer: Booleab，设置gulp是否缓存文件，在处理大文件时可提高效率
read: Boolean，是否执行文件读取操作

通过对sass插件的引用var sass = require('gulp-sass')来对样式进行编译：

sass插件
经过实验，在.pipe(sass())后面不能使用分号；，不然程序会报错。
编译成功后，就可以在dest文件夹下看到编译后的样式文件了，这里可以使用sass的语法来验证编译是否成功。
同时，我们可以使用css-minify插件来格式化样式

var cssminify = require('gulp-minify-css')

cssminify
系统会自动将css格式化，并将相同样式的选择器合并，例如：.index,.select{color:red}

5. 链接JS
   因为连接起来的js会有命名空间的混淆，所以这里要用到闭包。
   通过自定义插件的方式来做一个匿名函数的包裹：
   through2.obj.bufferContents 每个文件处理时调用
   through2.obj.endStream 所有文件都处理完后来调用
   插件
   首先安装through2插件

npm install --save-dev through2

通过定义bufferContents和endStream，在任务中调用through.obj方法

调用
执行gulp script，得到合并在一起的JS文件，并且每个JS的内容都被包含在自己的作用域中。
闭包
要使合并后的JS有效，还需要编写registJS函数。（编写的registJS函数属于自定义插件功能，也可以通过gulp自带的插件gulp-insert来完成以上功能，这在后面会有提及）
registJS的内容如下：
registJS
当然，通过插件gulp-insert可以直接完成闭包和registJS的功能。
步骤一样是先安装插件 npm install --save-dev gulp-insert
在代码中引用插件：var insert = require('gulp-insert')
然后改写上面的代码：
更改以后
gulp-insert使用stream类来才做文件对象，比之前自定义的时候用buffer更好。

6. 压缩js
   安装gulp-uplify：npm install --save-dev gulp-uglify
   引用插件：var uglify = require('gulp-uglify')
   调用插件：.pipe(uglify())
gulp-uglify是在生产环境下的压缩。
   如果要在开发环境下压缩的话，需要使用另外一个插件 browser-sync
   安装插件：npm install --save-dev browser-sync
   引用插件：var browserSync = require('browser-sync').create();
   为了举例，我们新建一个开发环境下的任务default:dev:

gulp.task('default:dev',['script:dev','style:dev'],function(){
    browserSync.init({
        server:{
            baseDir:'./'  //新建一个server
        },
        open:false  //防止代码运行时，浏览器自动打开一个页面
    })
})

但是这时候的css和js都是已经压缩的，需要安装插件gulp-sourcemaps。
安装插件：npm install --save-dev gulp-sourcemaps
复制原先的style和script任务，把人物名称分别改为：style:dev和script:dev，同时把default:dev的依赖也改成对应的名字['script:dev','style:dev']。
style:dev如下：

style:dev
*注意：在:dev环境下不能使用cssminify()
script:dev如下：
script:dev
运行default:dev任务后就会在控制台source页面看到没有压缩的css和js供开发人员调试。
后期研究：unit test 框架核心功能的单独调试

7. Watch功能
   在default:dev任务中添加两行watch的代码：
   gulp.watch('scriptPath',['script:dev']); //scriptPath在本项目中为：./script/**/*.js，[ ]中的是需要执行的任务名称,中括号不能删除
   gulp.watch('stylePath',['style:dev']); //stylePath在本项目中为：./style/**/*.scss，[ ]中的是需要执行的任务名称,中括号不能删除

同时在script:dev和style:dev两个任务中添加一行代码：

.pipe(browserSync.stream()); //同步浏览器

完成后在命令行启动任务default:dev:

gulp default:dev

这时，在样式文件中修改的内容一旦保存可以直接在显示器显示渲染效果，无需刷新浏览器，这就是watch的功能。

注：以上所有内容都是本人的学习笔记和总结，仅供学习和参考，如果有遗漏或者不当的地方请谅解，请勿转载。

@anMoo韩魔