yeoman/grunt-usemin 用来将 HTML 文件中(或者 templates/views)中没有优化的 script 和 stylesheets 替换为优化过的版本. usemin 暴露两个内置的任务,分别为: useminPrepare 为将指定文件中的 usemin block 转换为单独的一行(优化版本)准备配置.这通过为每个优化步骤生成名为generated 的子任务来完成. usemin 使用优化版本替换 usemin 块,如果在磁盘上可以找到 revisioned 版本…

前端优化是尽量减少http请求,所以我们需要尽量合并压缩文件,然后调用压缩后的文件,比如多个css文件压缩成一个,多个js文件合并压缩等,usemin能够自动在html中使用压缩后的文件,达到上面的目的. 上图是完整打包后的文件目录,原始目录是assets,打包发布的文件是dist. gruntfile.js文件内容: module.exports = function(grunt) { grunt.config.init({ clean:{ src:"dist/" }, usemin…

Objectives and Outcomes In this exercise, you will continue to learn to use Grunt, the task runner. You will configure the Grunt file with a set of additional tasks to build your web project. At the end of this exercise, you will be able to: Configur…

grunt-usemin: Replaces references to non-optimized scripts or stylesheets into a set of HTML files usemin exports 2 different tasks: useminPrepare prepares the configuration to transform specific construction (blocks) in the scrutinized file into a s…

窃以为这两个插件是比较有用的,filerev是给js.css进行编码重命名,usemin修改html中被重命名的js.css文件的引用.另外说明下之前将concat.cssmin.uglify放在一篇中的原因,因为usemin会自动对引用中的css文件进行concat和cssmin,对js文件进行concat和uglify.也就是说,如果不是定制化需求,只是简单的合并和压缩,使用了usemin就不用配置concat.cssmin.uglify这些task了. filerev相对比较简单,更完fi…

相关插件的引用: grunt-usemin  对页面的操作 grunt-contrib-cssmin  压缩css load-grunt-tasks 瘦身gruntfile grunt-rev给md5加密 实际的使用场景:压缩css文件到指定目录,并且更改页面引用的外链(这里以css为例). 情景一:html页面与要操作的css在同一目录下,且也与操作后的css在同一目录下. **这里使用npm中的注释方式来操作外链的,扩展性很不好. Gruntfile.js内容如下: module.expor…

安装 CLI npm install -g grunt-cli//全局安装 npm init //初始化package.json npm init   命令会创建一个基本的package.json文件. npm install grunt --save-dev npm install grunt-contrib-jshint --save-dev .......//安装你需要的依赖 安装完以后在package.json的同级创建一个Gruntfile.js配置文件 配置如下 module.exp…

前端资源构建-Grunt 随着前端开发的复杂度越来越高,前端页面动辄上几十个js,十几个html页面.用户打开一个页面需要加载一堆的css,js,html文件,对于有大量用户的web应用来说,既消耗服务带宽,用户加载速度也很受影响.特别是现在大量的移动端web应用涌现出来,页面加载速度至关重要,所以对前端资源做压缩是必须做的工作.grunt就是nodejs平台上一个非常优秀的前端构建工具.他可以拼接.丑化.压缩前端资源,大大提升页面访问速度 下面简要介绍grunt构建环境在windows平台的搭…

一.grunt是基于nodejs的,所以首先我们需要安装node 二.全局安装grunt 可以参考 http://www.gruntjs.net/docs/getting-started/ 进行安装. 1.全局安装 npm install -g grunt-cli 2.进入当前项目根据配置文件 package.json 进行本地安装,或者直接把以前项目所有用过的本地安装文件直接复制到当前项目使用 3.任务设置 打开gruntfile.js进行设置 module.exports = functio…

grunt.initConfig方法 用于模块配置,它接受一个对象作为参数.该对象的成员与使用的同名模块一一对应. 每个目标的具体设置,需要参考该模板的文档.就cssmin来讲,minify目标的参数具体含义如下: expand:如果设为true,就表示下面文件名的占位符(即*号)都要扩展成具体的文件名. cwd:需要处理的文件(input)所在的目录. src:表示需要处理的文件.如果采用数组形式,数组的每一项就是一个文件名,可以使用通配符. dest:表示处理后的文件名或所在目录. ext:…