需要了解的知识:

1、nodejs的安装与命令行使用

2、nodejs安装应用

3、grunt的初步了解

本文已假定读者已经熟悉以上知识。

好,我们继续:

任务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
selector.js
stack.js
touch.js
zepto.js

目录结构:

dist/
node_modules/
src/
Gruntfile.js
package.json

package.json是依赖库文件

Gruntfile.js是执行步骤程序

一、js合并压缩

第一次需要先安装grunt。执行 npm install -g grunt-cli 进行安装。如果已经安装,可以忽略。

1.package.json文件

{
"name": "demo",
"file": "zepto",
"version": "0.1.0",
"description": "demo",
"license": "MIT",
"devDependencies": {
"grunt": "~0.4.1",
"grunt-contrib-jshint": "~0.6.3",
"grunt-contrib-concat": "~0.5.0",
"grunt-contrib-uglify": "~0.2.1",
"grunt-contrib-requirejs": "~0.4.1",
"grunt-contrib-copy": "~0.4.1",
"grunt-contrib-clean": "~0.5.0",
"grunt-strip": "~0.2.1"
},
"dependencies": {
"express": "3.x"
}
}

2.Gruntfile.js

module.exports = function (grunt) {
grunt.initConfig({
concat: {
options: {
},
dist: {
src: ['src/**/*.js'],//src文件夹下包括子文件夹下的所有文件
dest: 'dist/built.js'//合并文件在dist下名为built.js的文件
}
},
uglify: {
build: {
src: 'dist/built.js',//压缩源文件是之前合并的buildt.js文件
dest: 'dist/built.min.js'//压缩文件为built.min.js
}
}
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-concat'); grunt.registerTask('default', ['concat','uglify']);
}

执行步骤:

(1)安装依赖,已安装可以忽略: npm install 。将会下载依赖的文件到node_modules目录。

(2)执行合并压缩: grunt

>grunt
Running "concat:dist" (concat) task
File dist/built.js created. Running "uglify:build" (uglify) task
File "dist/built.min.js" created. Done, without errors.

将会在dist目录生成

built.js
built.min.js

任务2:将src/css目录下的所有css文件合并,并压缩。

二、对CSS进行合并压缩

需要安装grunt-css。执行 npm install grunt-css 安装。安装成功,下载到 node_modules/grunt-css 。如果已经安装,可以忽略。

1、package.json同上;

2、Gruntfile.js如下:

module.exports = function (grunt) {
grunt.initConfig({
concat: {//css文件合并
css: {
src: ['src/css/*.css'],//当前grunt项目中路径下的src/css目录下的所有css文件
dest: 'dist/all.css' //生成到grunt项目路径下的dist文件夹下为all.css
}
},
cssmin: { //css文件压缩
css: {
src: 'dist/all.css',//将之前的all.css
dest: 'dist/all.min.css' //压缩
}
}
});
grunt.loadNpmTasks('grunt-css');
grunt.loadNpmTasks('grunt-contrib-concat'); grunt.registerTask('default', ['concat','cssmin']);
}

参考:

1、 Grunt中文网

http://www.gruntjs.net/getting-started

(完结)

使用grunt合并压缩js、css文件的更多相关文章

  1. 开箱即用 - Grunt合并和压缩 js,css 文件

    js,css 文件合并与压缩 Grunt 是前端自动化构建工具,类似webpack. 它究竟有多强悍,请看它的 介绍. 这里只演示如何用它的皮毛功能:文件合并与压缩. 首先说下js,css 合并与压缩 ...

  2. MVC打包压缩JS&CSS文件调试时过滤了一些文件

    BundleTable.这个确实是比较好用,打包并压缩了CSS,使之加载时减少流量. 但是在调试的时候会疑问为何有很多JS,CSS文件无法打包,其实是因为调试时VS自动过滤了如下文件:   后台跟踪了 ...

  3. grunt 合并压缩js和css文件(二)

    具体node及文件配置请看: grunt 安装使用(一) 要压缩的文件 --src/ ajax.js assets.js touch.js zepto.js 目录结构: dist/ node_modu ...

  4. gulp入门-压缩js/css文件(windows)

    类似于grunt,都是基于Node.js的前端构建工具.不过gulp压缩效率更高. 工具/原料 nodejs/npm 方法/步骤 首先要确保pc上装有node,然后在global环境和项目文件中都in ...

  5. IIS7.5打开GZip压缩,同时启用GZip压缩JS/CSS文件的设置方法[bubuko.com]

    IIS7.5或者IIS7.0开启GZip压缩方法:打开IIS,在右侧点击某个网站,在功能视图中的“IIS”区域,双击进入“压缩”,如图下图: 分别勾选“启用动态内容压缩”和“启用静态内容压缩”.这样最 ...

  6. Web网站配置Gzip,压缩js css文件

    启用apache的gzip 找到httpd.conf,打开文件找到对mod_deflate的注释 #LoadModule deflate_module modules/mod_deflate.so 去 ...

  7. GruntJs安装及使用入门(自定义grunt任务,合并压缩js、css)

    一.Grunt.js简介(实现自动化) 1)简要说明: 1.GruntJs是基于node的javascript命令行工具,可以自动化构建.测试.生成文档的项目管理工具: 2.使用GruntJs可以自动 ...

  8. ASP.NET MVC 4 Optimization的JS/CSS文件动态合并及压缩

    JS/CSS文件的打包合并(Bundling)及压缩(Minification)是指将多个JS或CSS文件打包合并成一个文件,并在网站发布之后进行压缩,从而减少HTTP请求次数,提高网络加载速度和页面 ...

  9. JS&CSS文件请求合并及压缩处理研究(五)

    接上篇.在我们最终调用 @Html.RenderResFile(ResourceType.Script) 或者 @Html.RenderResFile(ResourceType.StyleSheet) ...

随机推荐

  1. KPI

    一.综合计划部KPI明细数据查询--xigu用户要求:需显示第三季度,即789三个月的明细数据解决方法:1.查看SSISC:\Users\Administrator\Documents\Visual ...

  2. const实现

    [const实现]

  3. css属性word-spacing和letter-spacing的区别

    word-spacing和letter-spacing用来定义单词或者字母之间的水平空白间隔.顾名思义,word-spacing定义了单词之间的空白,例如: <div style="w ...

  4. C# 根据包含文件的路径和文件的名称的字符串获取文件名称的几种方法

    C# 截取带路径的文件名字,扩展名,等等 的几种方法 C#对磁盘IO操作的时候,经常会用到这些,路径,文件,文件名字,文件扩展名. 之前,经常用切割字符串来实现, 可是经常会弄错. 尤其是启始位置,多 ...

  5. 2014 ACM/ICPC 北京邀请赛 部分 题解

    题目链接:http://acm.bnu.edu.cn/bnuoj/problem.php?search=2014+ACM-ICPC+Beijing+Invitational+Programming+C ...

  6. select与poll函数介绍

    select与poll函数介绍 在所有依从POSIX的平台上,select函数使我们可以执行I/O多路转接.传向select的参数告诉内核: 1)我们所关心的描述符 2)对于每个描述符我们所关心的状态 ...

  7. python datatime

    一.datetime 1.date date.today() 2.time 3.datetime datetime.now() datetime.strftime(fmt) 转换为字符串 dateti ...

  8. linux系统的目录结构

    前言 对于每一个Linux学习者来说,了解Linux文件系统的目录结构,是学好Linux的至关重要的一步.,深入了解linux文件目录结构的标准和每个目录的详细功能,对于我们用好linux系统只管重要 ...

  9. deepdetect 用c++11写的机器学习caffe和XGBoost API 接口

    https://github.com/beniz/deepdetect DeepDetect (http://www.deepdetect.com/) is a machine learning AP ...

  10. AutoResetEvent信号锁 waitone set 执行一次线程退出 挺不爽的地方

    下边有个 循环调用线程写奇偶数的程序 class TheadTest { //定义一个Stream对象接收打开文件 private FileStream st; //构造方法 public Thead ...