前端工程自动化--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)，楼主建议，像这种工具类的技能还是要多练习练习，光看是没用的，而且每个项目最后的构建方式不一定一样。