grunt

Page 1 of 1

Archives

文件夹

今天终于写个接近最终版的脚本,简单总结一下思路。 先确定我都要干什么,总结如下: 【cssmin】压缩css 【uglify】压缩js 【cssmin】合并css到style.css 【uglify】合并js库/框架文件到lib.js 【uglify】合并自定义js到script.js 【copy】复制需要处理的html到目标地点(单页面项目只涉及到一个文件) 【usemin】然后处理目标文件 【filerev】处理目标文件版本号问题(对合并后的制定文件,现在只写了js和css)   弄清思路后一步步操作,这个脚本总算是正常工作了。   和一些说明有所不同的是,我这里没有用concat、jshint、clean。 concat是被cssmin和uglify的功能替代掉了,不写也可以合并。 jshint没用主要是因为对自己代码不是特别有自信,用了以后感觉要花好多时间调试… clean是真心用不上。   参考文章: http://ericnishio.com/blog/compile-less-files-with-grunt http://www.xuanfengge.com/npm-installation-did-not-succeed-and-github-will-not-open-solutions.html https://www.npmjs.org/package/grunt-html-build https://www.npmjs.org/package/grunt-contrib-concat https://www.npmjs.org/package/grunt-contrib-less https://www.npmjs.org/package/grunt-contrib-watch  

grunt-usemin的作用 usemin用来生成优化后(合并,压缩)的脚本,然后以此替换html文件里面的javascript, css和其他脚本的引用 使用方式 npm install grunt-usemin –save-dev 任务 usemin通过两个内置的任务来完成上述的功能,分别是useminPrepare和usemin,同时还需要其它一些优化工具(cssmin,concat等)来完成优化工作。usemin通过动态的为这些优化工具插件生成子任务的方式来实现整个的目标。 usemin的两个内置的任务 useminPrepare 准备配置文件。配置文件是根据结构化的文件(如html)里面的块声明来生成的。最终把这些应用替换成优化后的文件引用。在这个过程中,为每个优化的步骤生成了很多的名为generated的子任务,这些优化的步骤每步都是一个grunt插件,下面将会列举出来。 usemin 把结构化文件(html)的块声明里面的文件引用替换。如果那些脚本文件有打过版本声明的,将会用版本声明的文件应用来替换。这个个过程会直接修改结构化文件(如html)的内容。 你必须手动的install和load构建过程中需要的依赖插件 基本例子: grunt.registerTask(‘build’, [ ‘useminPrepare’, ‘concat:generated’, ‘cssmin:generated’, ‘uglify:generated’, ‘filerev’, ‘usemin’ ]); useminPrepare任务 useminPrepare 在之前配置基础上,生成新的配置文件,在这个新的配置文件里定义了文件整个处理过程。默认情况下js文件会做concat,uglify处理,css文件会做concat,cssmin处理。 结构化文件(html)的块声明 <!– build:<type>(alternate search path) <path> –> … HTML Markup, list of script / link tags. <!– endbuild –> type 文件类型 可以是css,js,或者其他自定义类型(后面会讲到)。如果都不是构建脚本会忽略。这个引用块只会在开发环境出现,最后的build成功后不会出现。 alternate search path (可选的)默认情况下那些脚本文件的查找都是相对当前处理的文件的。 path 优化后文件的输出目录。 <!– build:js js/app.js –> <script […]