切图崽的自我修养-使用自动化工具

前言

F5已烂

想来大家对自动化构建工具已经不陌生了,自动化构建工具可以帮开发者省去很多重复劳动比如:语法纠错、文件打包、文件操作,合并压缩等等. 常用的自动化构建工具有Gulp,Grunt,Fis等等,这些构建工具核心都是依赖第三方插件,通过颗粒化任务,再将这些任务按照合适的方式进行组合,构建项目所需的自动化工作流

常用插件

这里来简单来说明一下Grunt的最常用的几个插件:

  1. grunt-include-replace-more 可以对项目中的html进行模版化配置

  2. grunt-contrib-jshint 可以对项目中的Js文件进行语法检查

  3. grunt-contrib-uglify 可以对项目中的Js文件进行压缩

  4. grunt-cmd-transport 将匿名Js模块具名化

  5. grunt-cmd-concat 按需合并Js模块

  6. grunt-contrib-compass 可以将项目中的Sass文件编译成css

  7. grunt-inline 可以将项目中标示了_inline的资源通过内联的方式引入

  8. grunt-contrib-imagemin 可以对项目中的Img进行压缩

  9. grunt-contrib-watch 监听项目中的文件状态,如果文件被改变,则重新构建

  10. grunt-contrib-copy 复制文件到某个目录

  11. grunt-contrib-clean 删除某个文件

结语:

以上是Grunt的最基本最常用的几个插件. 其中较难使用的是如何合并Js模块,
也就是如何整合 grunt-cmd-transport, grunt-cmd-concat 的使用. 这里又要牵扯到Seajs匿名模块,具名模块和ID即路径的问题, 这里放到模块化Js的章节里说吧

(有兴趣的同学可以移步Grunt官网 享受自动构建的快感)

关键字:JavaScript, css, html, grunt


本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部