前端工程化 - gulp

gulp是什么

gulp就是一个前端的自动化构建工具，在开发过程当中不少重复的任务能够使用gulp和gulp插件自动完成。相比于grunt，gulp很是好上手，核心API只有4个，并且还有丰富的插件库。

gulp快速入门

• 全局安装gulpnpm install -g gulp
• 初始化项目，在项目目录下npm init -y
• 做为项目的开发依赖（devDependencies）安装npm install --save-dev gulp
• 在项目根目录下建立一个名为gulpfile.js的文件，并写入以下内容

• 在当前目录的命令行中输入gulp

gulp的核心API

gulp的核心API有四个，task、dest、task和watch，详细的用法能够到官网文档查看http://www.gulpjs.com.cn/docs/api/

这里将用一个简单的例子来演示gulp的四个核心API如何使用

• 安装gulp-less插件npm install --save-dev gulp-less
• 在项目下新建./less/demo.less，并在其中写入

• 接着在gulpfile.js中写入以下内容

• 而后再当前项目的命令行中敲入gulp并回车执行
• 接下来就能够看到当前项目目录下生成了css/demo.css，less文件被成功解析成css文件并放到的指定目录中
• 再将demo.less中的内容，能够发现demo.css中的内容也发生了改变

gulp经常使用插件

• gulp-less less解析
• gulp-sass sass解析
• gulp-uglify js代码压缩
• gulp-clean-css css代码压缩
• gulp-htmlmin html代码压缩
• gulp-imagemin 图片压缩
• gulp-autoprefixer 自动添加css3浏览器前缀
• gulp-debug
• gulp-rename 文件重命名
• gulp-rev和gulp-rev-collector 添加版本号和替换文件中的图片，js文件和css文件等的引入路径，详细如何作，能够参考这篇博文http://www.javashuo.com/article/p-tniksaof-bw.html
• gulp-load-plugins 自动加载gulp插件
• gulp-sourcemaps 生成sourcemap文件
  在实际的项目开发工程中，咱们可能会使用less，sass，TypeScript等，而后浏览器的调式工具（如chrome的开发者工具）没法直接调试这类的文件，经过sourcemap咱们就能够很轻松的在浏览器进行调试。
  例子：
  在项目目录所在的命令行中敲入cnpm install --save-dev gulp gulp-sass gulp-sourcemaps，而后在gulpfile.js中写入

而后生成响应的.map文件

接着在chrome浏览器中打开开发者工具（F12），而后点击开发者工具右上角的关闭按钮旁的工具条进入setting

而后勾选上Sources下的Enable CSS source maps和Auto-reload generated CSS，刷新浏览器后就能够在开发者工具中显示scss了（注意右下）

• browser-sync 浏览器同步测试工具，具体的使用方法能够到这里查看http://www.browsersync.cn/