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

前言

F5已烂css

grunt-logo.png

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


经常使用插件

这里来简单来讲明一下Grunt的最经常使用的几个插件:模块化

  • grunt-include-replace-more 能够对项目中的html进行模版化配置grunt

  • grunt-contrib-jshint 能够对项目中的Js文件进行语法检查工具

  • grunt-contrib-uglify 能够对项目中的Js文件进行压缩spa

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

  • grunt-cmd-concat 按需合并Js模块插件

  • grunt-contrib-compass 能够将项目中的Sass文件编译成csscode

  • grunt-inline 能够将项目中标示了_inline的资源经过内联的方式引入htm

  • grunt-contrib-imagemin 能够对项目中的Img进行压缩

  • grunt-contrib-watch 监听项目中的文件状态,若是文件被改变,则从新构建

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

  • grunt-contrib-clean 删除某个文件


结语:

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

(有兴趣的同窗能够移步Grunt官网 享受自动构建的快感)

相关文章
相关标签/搜索