标签:
现在我们通过这3个问题来学习一下;
这行命令告知node,先局部(node_modules)查找gulp包,找不到再去全局查找。找到之后就会赋值给gulp变量,然后我们就可以使用它了。
--如何配置gulp任务:
这是gulp设置task的大概模版,‘task-name‘是你给任务起的名字,稍后在命令行执行gulp task-name,将任务执行。
写个hello world,是这样的
然后在命令行执行
运行结果:
好的,已经成功运行出来了!大概任务就是这样子,现在我们来写一个正式的gulp任务。
例如,编译sass,任务代码为:
如图:.src 是文件的源路径;.pipe是任务运行的管道;.dest是任务结束之后的输出路径。
同时sass文件内容为,下面那个分数没有被计算出来:
好的,代码写完了,在命令行执行命令 $ gulp sass,如图:
编译后,你在css输出的路径那里会看到生成了一个同名的.css文件,内容就是sass编译完的结果为:
gulp还有很多其它插件,例如:压缩,合并,加vendor前缀(css3对各个浏览器兼容的前缀)等等功能,都跟以上做法类似。
Links:
作用:让gulp任务,可以相互独立,解除任务间的依赖,增强task复用
Links:
作用:静态文件服务器,同时也支持浏览器自动刷新
Links:https://www.npmjs.com/package/del
作用:删除文件/文件夹
Links:
作用:编译coffee代码为Js代码,使用coffeescript必备
Links:
作用:gulpfile默认采用js后缀,如果要使用gulpfile.coffee来编写,那么需要此模块
Links:
作用:自动启动/重启你的node程序,开发node服务端程序必备
Links:
作用:用于获取启动参数,针对不同参数,切换任务执行过程时需要
Links:
作用:gulp常用的工具库
Links:
作用:通过UglifyJS来压缩JS文件
Links:
作用:合并JS
Links:
作用:处理JS时,生成SourceMap
Links:
作用:将less预处理为css
Links:
作用:将sass预处理为css
No.13、gulp-autoprefixer
Links:
作用:使用Autoprefixer来补全浏览器兼容的css。
Links:
作用:压缩css。
Links:
来源:http://www.yidianzixun.com/n/0CUI9w1Z?s=8&appid=xiaomi
标签:
原文地址:http://www.cnblogs.com/jiuyi/p/5219211.html