gulp前端自动化构建工具入门篇
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了gulp前端自动化构建工具入门篇相关的知识,希望对你有一定的参考价值。
现在我们通过这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对各个浏览器兼容的前缀)等等功能,都跟以上做法类似。
No.1、run-sequence
Links:
作用:让gulp任务,可以相互独立,解除任务间的依赖,增强task复用
No.2、browser-sync
Links:
作用:静态文件服务器,同时也支持浏览器自动刷新
No.3、del
Links:https://www.npmjs.com/package/del
作用:删除文件/文件夹
No.4、gulp-coffee
Links:
作用:编译coffee代码为Js代码,使用coffeescript必备
No.5、coffee-script
Links:
作用:gulpfile默认采用js后缀,如果要使用gulpfile.coffee来编写,那么需要此模块
No.6、gulp-nodemon
Links:
作用:自动启动/重启你的node程序,开发node服务端程序必备
No.7、yargs
Links:
作用:用于获取启动参数,针对不同参数,切换任务执行过程时需要
No.8、gulp-util
Links:
作用:gulp常用的工具库
No.9、gulp-uglify
Links:
作用:通过UglifyJS来压缩JS文件
No.9、gulp-concat
Links:
作用:合并JS
No.10、gulp-sourcemaps
Links:
作用:处理JS时,生成SourceMap
No.11、gulp-less
Links:
作用:将less预处理为css
No.12、gulp-sass
Links:
作用:将sass预处理为css
No.13、gulp-autoprefixer
Links:
作用:使用Autoprefixer来补全浏览器兼容的css。
No.14、gulp-minify-css
Links:
作用:压缩css。
No.15、connect-history-api-fallback
Links:
来源:http://www.yidianzixun.com/n/0CUI9w1Z?s=8&appid=xiaomi
以上是关于gulp前端自动化构建工具入门篇的主要内容,如果未能解决你的问题,请参考以下文章