Gulp-用自动化构建工具增强你的工作流程

先说说gulp的优点,其实就是官网那一套,但是确实如此。

  • 1.易于使用。与其看到grunt,gruntfile.js一大堆配置。不如gulp来的更赏心悦目一些。通过代码优于配置的策略,Gulp 让简单的任务简单,复杂的任务可管理。
  • 2.构建快速。相比于grunt的IO操作,gulp的流式操作更加强大

以下是我的实践方式

先来看需要哪些插件


然后,接下来,第一步是要clean一下,目的是为了防止静态资源冗余。


清理完之后,就可以对我们的静态资源进行优化处理。这里以js为例,执行js,uglify的压缩优化,接下来就是到了添加版本号rev(),并将经过优化和版本控制的js输出到dist文件夹里。最后再用rev.manifest,将对应的版本号用json表示出来



接着便是最后一步,改变引用路径,这里我们将这个任务命名为rev


src前一个是引入刚才生成的json文件,后一个是需要更改的html模板,当然我这里是jsp。然后replaceReved: true就可以成功替换了。最后将替换过的文件输出即可,这里我输出到了原来引入的路径,这样就可以成功替换了。如果你在开发的时候需要不断调试,还可以加上gulp.watch,实时监控文件变化,然后动态做出响应。

这里需要说明以后,加watch的时候,一定要注意依赖顺序,这是个坑。因为版本控制是需要顺序执行的,如果你的项目特别大,依赖非常多,可以考虑使用gulp-sequence

github地址:https://github.com/teambition/gulp-sequence