gulp前端自动化构建工具新手入门篇
很久没有更新博文了。
经过了一次年前吐血的赶项目，终于在年后回血了。趁着有空，新学到了一个前端自动化构建工具－gulp。
现在我们通过这3个问题来学习一下；
$ npm install --global gulp
$ npm install --save-dev gulp
$ touch gulpfile.js
var gulp = require('gulp');
这行命令告知node，先局部（node_modules）查找gulp包，找不到再去全局查找。找到之后就会赋值给gulp变量，然后我们就可以使用它了。
－－如何配置gulp任务：
gulp.task('task-name',funcion(){
//Stuff here
});
这是gulp设置task的大概模版，'task－name'是你给任务起的名字，稍后在命令行执行gulp task－name，将任务执行。
写个hello world，是这样的
然后在命令行执行
$ gulp hello
运行结果：
好的，已经成功运行出来了！大概任务就是这样子，现在我们来写一个正式的gulp任务。
例如，编译sass，任务代码为：
如图：.src 是文件的源路径；.pipe是任务运行的管道；.dest是任务结束之后的输出路径。
同时sass文件内容为，下面那个分数没有被计算出来：
好的，代码写完了，在命令行执行命令 $ gulp sass，如图：
编译后，你在css输出的路径那里会看到生成了一个同名的.css文件，内容就是sass编译完的结果为：
gulp还有很多其它插件，例如：压缩，合并，加vendor前缀（css3对各个浏览器兼容的前缀）等等功能，都跟以上做法类似。
No.1、run-sequence
Links: https://www.npmjs.com/package/run-sequence
作用：让gulp任务，可以相互独立，解除任务间的依赖，增强task复用
No.2、browser-sync
Links: http://www.browsersync.io/
作用：静态文件服务器，同时也支持浏览器自动刷新
No.3、del
Links：https://www.npmjs.com/package/del
作用：删除文件/文件夹
No.4、gulp-coffee
Links: https://github.com/wearefractal/gulp-coffee
作用：编译coffee代码为Js代码，使用coffeescript必备
No.5、coffee-script
Links: https://www.npmjs.com/package/coffee-script
作用：gulpfile默认采用js后缀，如果要使用gulpfile.coffee来编写，那么需要此模块
No.6、gulp-nodemon
Links: https://www.npmjs.com/package/gulp-nodemon
作用：自动启动/重启你的node程序，开发node服务端程序必备
No.7、yargs
Links: https://www.npmjs.com/package/yargs
作用：用于获取启动参数，针对不同参数，切换任务执行过程时需要
No.8、gulp-util
Links: https://www.npmjs.com/package/gulp-util
作用：gulp常用的工具库
No.9、gulp-uglify
Links: https://www.npmjs.com/package/gulp-uglify
作用：通过UglifyJS来压缩JS文件
No.9、gulp-concat
Links: https://www.npmjs.com/package/gulp-concat
作用：合并JS
No.10、gulp-sourcemaps
Links: https://www.npmjs.com/package/gulp-sourcemaps
作用：处理JS时，生成SourceMap
No.11、gulp-less
Links：https://www.npmjs.com/package/gulp-less
作用：将less预处理为css
No.12、gulp-sass
Links：https://www.npmjs.com/package/gulp-sass
作用：将sass预处理为css
No.13、gulp-autoprefixer
Links：https://www.npmjs.com/package/gulp-autoprefixer
作用：使用Autoprefixer来补全浏览器兼容的css。
No.14、gulp-minify-css
Links：https://www.npmjs.com/package/gulp-minify-css
作用：压缩css。
No.15、connect-history-api-fallback
Links：https://www.npmjs.com/package/connect-history-api-fallback
作用：开发angular应用必须，用于支持HTML5 history API.
最新文章
- gulp学习笔记4
- 嵌入式Linux驱动学习之路(二)u-boot体验
- 给Asp.Net MVC及WebApi添加路由优先级
- 解决Cannot find MySQL header files under /usr/include/mysql的错误
- linux系统下sd卡的备份与恢复
- BMS 项目过程中遇到的问题
- [转载]string转化大小写(C++)
- 给centOs添加epel源
- ACM核武器
- Swift中文教程(五)--对象和类
- 关于c++的引用
- Cocos2D将v1.0的tileMap游戏转换到v3.4中一例(四)
- gitlab汉化
- 在vultr中安装coreos
- nginx+keepalived实现负载均衡nginx的高可用
- Kafka迁移与扩容工具用法
- N！（N的阶乘）最末位非0的求解方法
- mybatis错误总结
- npm install命令对package-lock.json文件自动做了一些额外的更新
- linux用到的命令