需要了解的知识:

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. 【MVC】 非常简单的页面导出 WORD, EXCEL方法

    [MVC] 页面导出 WORD, EXCEL 前端 js function output() { var para = new Object(); para.html = getHtml(" ...

  2. POJ 1873 - The Fortified Forest 凸包 + 搜索 模板

    通过这道题发现了原来写凸包的一些不注意之处和一些错误..有些错误很要命.. 这题 N = 15 1 << 15 = 32768 直接枚举完全可行 卡在异常情况判断上很久,只有 顶点数 &g ...

  3. ios底层网络请求错误码

    kCFHostErrorHostNotFound = 1, kCFHostErrorUnknown = 2, // Query the kCFGetAddrInfoFailureKey to get ...

  4. UTF-8 <==> unicode(WCHAR)

    static int fetchWordFromUTF8(const chConstStringA& strText, WCHAR& result) { int nLength = s ...

  5. 基于weka的文本分类实现

    weka介绍 参见 1)百度百科:http://baike.baidu.com/link?url=V9GKiFxiAoFkaUvPULJ7gK_xoEDnSfUNR1woed0YTmo20Wjo0wY ...

  6. 在Linux下安装配置phpMyAdmin步骤

    本文于CentOS 6.5下测试可行,欢迎转载和指正. phpMyAdmin是一种基于Web的免费MySQL管理工具.phpMyAdmin是用PHP编写的,因此只有支持PHP的服务器才能使用phpMy ...

  7. python命令行参数

    〇.python中对应的argc, argv需要模块:sys参数个数:len(sys.argv)脚本名:    sys.argv[0]参数1:     sys.argv[1]参数2:     sys. ...

  8. 11 个 Linux 上最佳的图形化 Git 客户端

    Git是软件开发和若干其他版本控制任务免费和开源的分布式版本控制系统.它被设计用来以应付一切从小到非常大的项目,基于速度,效率和数据完整性. Linux用户主要通过命令行管理Git,不过,一些图形用户 ...

  9. Eclipse中出现-访问限制由于对必需的库XX具有一定限制,因此无法访问类型

    在项目上点击右键,找到构建路径.然后选择配置配置路径.按如下步骤来配置: 1 点击库选项 2把系统库扩展开来 3点击访问规则 4点击右边的添加按钮 5添加访问规则 6 分辨率设为可访问 7规则模式设为 ...

  10. UWP深入学习二:各种激活方式

    Launching, resuming, and multitasking How to launch an app for results Auto-launching with file and ...