很久没有更新博文了。
经过了一次年前吐血的赶项目,终于在年后回血了。趁着有空,新学到了一个前端自动化构建工具-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.