前端工程自动化--gulp的使用

Gulp

在这之前，我希望你有一定的NodeJS基础。没有也没关系，知道npm怎么用就行。

准备工作

1、你的电脑安装了node,(这个步骤我就省了。。)
2、创建一个项目文件夹,通过 npm init 创建package.json文件
3、npm install --save-dev gulp (安装gulp)
4、创建gulpfile.js文件。(重点)

接下来我们要完成什么需求

1、页面实时更新(好想拥有两个显示器-_-)
2、图片的压缩
3、CSS文件中部分属性自动加上前缀,压缩并且生成sourcemap文件
4、JS文件压缩并且生成sourcemap文件
5、对静态资源的缓存做处理(包括images、css、js)
6、替换文件中所有更改的名字
7、删除无用的文件

gulp插件

-------------------
del(文件删除)
-------------------
npm install --save-dev del

---------------------------
run-sequence(多任务处理)
---------------------------
npm install --save-dev run-sequence

----------------------
gulp-uglify(压缩JS)
----------------------
.......

-------------------
pump(错误定位)
-------------------
一般在gulp中多会用pipe，但是这里用pump更加方便一点。

---------------------------
gulp-imagemin(图片压缩)
---------------------------
......

---------------------------------------------
gulp-sourcemaps(保存源文件中代码位置的信息文件)
---------------------------------------------
/*
第一种
sourcemaps.init() sourcemaps.write() 映射文件生成在源文件中

第二种
sourcemaps.init() sourcemaps.write('../maps') 映射文件生成在源文件的上级目录的maps文件夹中.后缀多一个.map
*/

---------------------------------
gulp-autoprefixer(智能添加前缀)
---------------------------------
.....

---------------------------
gulp-clean-css(压缩css)
---------------------------
cleancss()

-------------------------
gulp-htmlmin(压缩html)
-------------------------
html({collapseWhitespace: true})

--------------------------------
gulp-rev和gulp-rev-collector
--------------------------------
静态资源的处理插件
rev()方法是将hash加到目标文件上.
rev.manifest是生成manifest.json保存源文件与修改后的文件的映射
revCollector() 是通过查找映射文件，修改引用这些文件的地方。

-------------------
browser-sync
-------------------
热更新插件

建议

因为这主要是个工具，就是配置写的比较麻烦，里面插件的用法还是看看官网上的介绍，用起来会更好一点。然后我们写了一个简单的配置demo，有兴趣的同学可以去看看(先看readme.md)，楼主建议，像这种工具类的技能还是要多练习练习，光看是没用的，而且每个项目最后的构建方式不一定一样。