使用GruntJS构建Web程序(3)
前一篇讲述了如何使用concat和uglify命令实现JavaScript资源的合并,压缩。这篇讲述下css资源的合并和压缩。
有如下步骤:
1新建项目Bejs
2新建文件package.json
3新建文件Gruntfile.js
4命令行执行grunt任务
一、新建项目Bejs
源码放在src下,该目录有两个子目录asset和js。js下放selector.js和ajax.js,这在上一篇已经讲了如何合并压缩它们。这篇只关注asset目录,asset目录下放了一些图片和css文件。一会会把两个css资源reset.css和style.css合并,压缩到dest/asset目录。一个合并版本all.css,一个压缩版本all-min.css。
二、新建package.json
package.json放在根目录下,它的意义上一篇已经介绍过了。现在的项目结构如下
package.json内容需符合JSON语法规范,如下
?
1
2
3
4
5
6
7
8
9
|
{
"name":"BeJS",
"version":"0.1.0",
"devDependencies":{
"grunt":"~0.4.0",
"grunt-contrib-concat":"~0.1.1",
"grunt-css":">0.0.0"
}
}
|
grunt-contrib-concat上一篇已经介绍过了,grunt-css是这篇要使用的插件。
此时,打开命令行工具进入到项目根目录,敲如下命令:npminstall
查看根目录,发现多了个node_modules目录,包含了四个子目录,见图
三、新建文件Gruntfile.js
Gruntfile.js也是放在项目根目录下,几乎所有的任务都定义在该文件中,它就是一个普通的js文件,里面可以写任意js代码而不仅局限于JSON。和package.json一样它也要和源码一样被提交到svn或git。
源码如下
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
module.exports=function(grunt){
//配置
grunt.initConfig({
pkg:grunt.file.readJSON('package.json'),
concat:{
css:{
src:['src/asset/*.css'],
dest:'dest/asset/all.css'
}
},
cssmin:{
css:{
src:'dest/asset/all.css',
dest:'dest/asset/all-min.css'
}
}
});
//载入concat和css插件,分别对于合并和压缩
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-css');
//默认任务
grunt.registerTask('default',['concat','cssmin']);
};
|
四、执行grunt任务
打开命令行,进入到项目根目录,敲grunt
从打印信息看出成功的合并和压缩并生成了dest目录及期望的文件,这时的项目目录下多了dest,如下
至此,css合并压缩完毕。
原文链接:http://www.cnblogs.com/snandy/archive/2013/05/20/3088613.html
分享到:
相关推荐
grunt压缩、合并js/css
此课程讲解grunt 实现对JS和CSS文件内容进行压缩处理。 Grunt 是一种自动化任务处理工具,它就是一个工具框架,有很多插件扩展它的功能。一般用于: ① 压缩文件 ② 合并文件 ③ 简单语法检查
如何将多个js文件合并压缩为一个js文件为...grunt是如何工作的clean:删除临时文件uglify:压缩qunit:测试concat:合并任务流程可能是这样的:task:cleantask:uglifytask:qunittask:concat安装前提是你已经安装了nodejs和n
利用grunt合并、压缩js、css文件,简单罗列步骤,初学者易学
利用Nodejs编写的grunt压缩程序,可压缩图片、css、js
Alloyteam 团队规范工具系列——自动整理CSS代码工具。 grunt-at-csstidy 是基于 Grunt '0.4.x' 与 csscomb '3.x' 的Grunt插件。 整合了Alloyteam的团队规范,并解决了部分CSS语法树解析的兼容问题。 上手教程 如果...
任务1:将src目录下的所有zepto及插件合并,并压缩。 --src/ ajax.js assets.js callbacks.js data.js deferred.js detect.js event.js form.js fx.js fx_methods.js gesture.js ie.js ios3.js ...
混合开发:node grunt混淆压缩 android中的angularjsionic 文件;在做android混合开发,web部分中的文件时...所以这里主要的是合并、压缩、混淆有关的css,js原生和Controller文件;如果更好的混淆方法,欢迎留言交流;
Alloyteam 团队规范工具系列——自动整理CSS代码工具。 grunt-at-csstidy 是基于 Grunt '0.4.x' 与 csscomb '3.x' 的Grunt插件。 整合了Alloyteam的团队规范,并解决了部分CSS语法树解析的兼容问题。 上手教程 如果...
grunt-css-injector 这个插件解析 css/scss/sass 文件,找到所有 @import 指令并注入这些文件。入门这个插件需要 Grunt。 如果您以前没有使用过 ,请务必查看指南,因为它解释了如何创建以及安装和使用 Grunt 插件。...
grunt-jsbeautifier, 使用Grunt和https美化 js css html和json文件 jsbeautifier jsbeautifier.org 用于 grunt正在启动这个插件推荐使用 Grunt ~0.4.1 。 Grunt ~0.3.0 只有 suported,直到 0.1.4版本。If之前,请务
grunt-csscss 运行 (一个 CSS 冗余分析器)的 Grunt 任务。 CSSCSS CSSCSS 在 Ruby( v1.9.x及更高版本)上运行,要检查 Ruby 是否安装在您的机器上,请使用ruby -v 。 要安装 CSSCSS gem,请运行gem ...
主要是做了一个基于node环境中,seajs的配置以及一些实例和利用grunt进行资源的打包压缩合并的构建
如果您以前从未使用过 ,请务必查看《指南》,因为它说明了如何创建以及安装和使用Grunt插件。 熟悉该过程后,可以使用以下命令安装此插件: npm install grunt-critical-css --save-dev 插件安装完成后,可以...
NULL 博文链接:https://jm1999.iteye.com/blog/2228816
grunt-strip-css-评论 使用从CSS中 安装 $ npm install --save-dev grunt-strip-css-comments 用法 require ( 'load-grunt-tasks' ) ( grunt ) ; // npm install --save-dev load-grunt-tasks grunt . initConfig ...
grunt前端自动化部署,在线压缩合并js、css、images和html 前几天分享了,然后并简单录制了一个小视频,之后不少朋友QQ留言,问有没有grunt深入地视频教程。哈哈,说实话,上次录制的视频很差,我是随便录制的,没有...
grunt项目构建样例,实现js文件css文件等的压缩和合并
如果您以前从未使用过 ,请务必查看《指南》,因为它说明了如何创建以及安装和使用Grunt插件。 熟悉该过程后,可以使用以下命令安装此插件: npm install grunt-wp-css --save-dev 插件安装完成后,可以使用以下...
grunt-css-sprite, 帮助前端工程师创建 css sprite的grunt插件 grunt-css-sprite生成高清设备雪碧图,使用 image-set//自动雪碧图sprite: { options: {//sprite背景图源文件夹,只有匹配此路径才会处理,