前端内容的自动化构建——gulp学习笔记

本文根据慕课网视频教程《前端内容的自动化构建》整理。

构建是为了模块化。

一、通过Browserify来实现JS代码的模块化

为什么需要模块化？——在实际的开发过程中，一个JS文件可能会引入其他JS文件，如果在其他JS文件中都定义了全局变量，那么最终可能就会引发冲突——全局变量污染，特别是多人协同开发时，你并不知道你在当前文件中定义的全局变量是否会与他人在其他文件中定义的全局变量同名。所以需要模块化，用来隔离各个文件内容，形成自己的命名空间，从而避免变量冲突。

browserify使用的模块规范

browserify安装

执行命令 npm install -g browserify即可

browserify的使用

新建一个文件夹，我命名为test，在文件夹下新建几个js文件，如下：

再新建一个index.js来引用这几个文件：

然后通过browserify给这几个文件打包，并通过-o指定一个输出文件main.js：

其实执行browserify index.js -o main.js 就行，被引入文件可以被自动找到。

打开main.js文件如下：

打包完成！

二、使用 Gulp + Browserify来实现自动化构建

上面虽然实现了JS代码构建，但是每次更改完JS文件后又得手动执行一次命令，因而引入gulp来实现自动监控文件变化从而完成构建。

Gulp——基于流的自动化构建工具

为什么基于流？——Gulp的设计者认为：大多数需要构建的过程，都不只需要一个步骤，如果不使用流，这个过程可能需要创建多个临时文件，才能达到效果；如果使用流，采用管道的形式，将一个步骤的处理结果输送给另一个步骤，一切数据都存放在内存中，这样减少了IO，从而提高了性能。

------gulp安装------

1. 全局安装 gulp：

npm install --global gulp

2. 作为项目的开发依赖（devDependencies）安装，项目下会多出node_modules文件夹：

npm install --save-dev gulp

3. 在项目根目录下新建gulpfile.js文件，并添加内容：

使用gulp需先通过require引入gulp模块，gulp通过task这个api来执行任务，default是gulp的默认任务名，后面跟回调函数。

4.执行gulpfile.js文件，执行命令gulp即可。

可以看到，回调函数已经被执行了，接下来我们需要将回调函数内容替换为browserify构建语句。

------通过browserify实现JS的模块化加载------

1、安装browserify模块

2、更改gulpfile.js文件。先引入browserify模块跟fs模块，其中fs模块是node的核心模块，所以不用install，然后在回调函数中执行js构建，browserify()完成初始化，add（）添加入口文件，bundle返回构建后的stream，pipe（）指定stream的输出文件。

3、删除掉之前的main.js文件，执行命令gulp即可，构建出来的文件与之前的一样。

------使用gulp.watch()实现JS的自动化模块加载------

1、更改一下文件目录，如下，将所有输入文件放到asset目录下：

2、安装run-sequence模块，用于在gulpfile.js不同任务间的相互调用

3、更改gulpfile.js文件

• 创建mainjs任务专门执行JS构建过程
• watch任务通过gulp的watch()方法来监听asset下任意js文件的变化，若发生变化，即在回调中通过run-sequence模块调用mainjs任务进行重新构建
• default默认任务调用mainjs构建任务及watch监听任务

4、执行gulp命令。之后更改asset文件夹下的任意js文件并保存，不用再次手动执行gulp命令，即会自动完成重新构建

------使用watchify实现JS的自动化模块加载------

除了使用gulp的watch方法来监听输入文件的变化，从而完成重新构建之外，browserify提供了一个watchify模块来完成同样的工作，优点是性能较好，代码可读性较好。

1、安装watchify

2、更改gulpfile.js文件。在初始化browserify中指定入口文件和watchify插件，之后通过watchify的update方法监听输入文件的变化，在回调中完成重新构建。

三、使用 Browserify加载第三方类库

------使用Browserify构建第三方类库------

为什么需要构建第三方类库？—— 如果我们需要通过script标签加载多个第三方类库，我们就可以通过构建的方式，将所有文件构建成一个文件，从而减少http请求。

（对第三方类库的构建过程具体见 https://www.imooc.com/video/16188，这里我没做笔记）

------使用gulp-uglify压缩JS代码------

gulp-uglify是封装后的UglifyJS，为了更好的在gulp中使用

在调用gulp-uglify对JS代码进行压缩前，有两个问题需要解决。在之前的gulpfile.js中，调用bundle（）后生成的stream是标准的node stream，是不能被gulp识别的stream，gulp通过一个vinyl-fs文件系统适配器来识别流，我们可以通过vinyl-source-stream模块来将node标准流转化为vinyl流，而gulp-uglify不接收stream而接受buffer，所以还需要通过vin-buffer模块来将stream转换为buffer，然后才能传给uglify压缩。

1、下面分别安装着3个模块

npm install gulp-uglify

npm install vinyl-source-stream

npm install vin-buffer

2、更改gulpfile.js文件

source中参数main.js是用于存放vinyl stream的临时文件，最后一个pipe没有写明输出文件，我想这可能直接由上面的main.js决定了吧（不太清楚），执行gulp命令后，main.js就是经压缩后的文件

------使用gulp-if来条件判断是否进行代码压缩------

gulp-if可以让我们选择是否要压缩代码，比如在开发环境下，我们可能并不想得到压缩的代码，而是想看看格式化良好的代码；而在生产环境下，为了安全，我们需要得到压缩后的代码，这种时候就可以通过gulp-if模块来实现。

1、安装 gulp-if

npm install gulp-if

2、更改gulp-if文件。第11行通过判断当前环境是否是生产环境，从而决定28行是否压缩代码（isProduction为true时压缩）。第11行process是指当前进程，env变量中包含当前进行的所有环境变量（信息），ENV表示开发或生产环境。

3、如果在本地直接执行gulp命令，那么得到的结果自然是未压缩的代码；如果想要看看生产环境下的情况，则执行

ENV=prod gulp

四、使用 coffeescipt 和 ES6 来优化代码

------使用gulp-coffee来编译coffeescript------

coffeescript官方虽然提供了coffee-script模块来编译coffeescript，但是为了在gulp中更好的实现编译，这里使用gulp-coffee模块

1、安装gulp-coffee

npm install gulp-coffee

2、更改gulpfile.js文件。先创建几个coffeescript文件，然后在gulpfile.js中新建任务coffee

3、执行任务coffee，采用 “gulp 任务名”命令来执行指定任务

gulp coffee

4、coffee文件会编译成JS文件，js文件与原来的coffee文件同名，我们再通过构建JS的方式，完成对JS文件的最终构建。注意，上面并没有实现自动化，可以通过gulp.watch()来实现自动化构建。

------使用gulp-babel编译es6------

跟gulp-coffee同理，为了在gulp中更好的使用babel，采用gulp-babel而没用官方的babel-cli。

1、安装所需模块

2、在项目根目录下新建 .babelrc文件，内容如下，这是一个配置文件，告诉babel转换es2015即es6的代码

3、将原先的a、b、c.js文件改成es6的：（使用了箭头函数）

3、更改gulpfile.js文件，

第42行将编译后的es5文件放在build文件夹下，文件名与asset文件夹下的es6文件名对应。

五、CSS的前端构建

-------合并压缩CSS代码-------

通过gulp-concat合并多个css文件，再通过gulp-clean-css压缩最终生成的文件

1、安装模块

2、新建style文件夹，在文件夹下新建几个css文件

3、更改gulpfile.js文件

4、最终结果

下面是只经合并，未经压缩的css文件

-------使用gulp-sass编译sass代码-------

1、安装gulp-sass

我用npm安装失败，改用淘宝源的cnpm安装成功。

2、新建scss文件夹，在文件夹下新建2个scss文件：

再新建一个index.scss文件引入以上两个文件

3、更改gulpfile.js文件

4、执行gulp命令，完成！会在根目录下生成一个index.css文件。

课程到此结束！