具体node及文件配置请看:

grunt 安装使用(一)

要压缩的文件

--src/
ajax.js
assets.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": "grunt_test",
"version": "1.0.0",
"devDependencies": {
"grunt": "^1.0.1",
"grunt-contrib-concat": "^1.0.1",
"grunt-contrib-uglify": "^3.0.1"
}
}

安装命令:

cnpm install grunt-contrib-concat --save-dev

 2.Gruntfile.js

这个文件是配配置文件

module.exports = function (grunt) {
// 项目配置
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify:{
js:{
files:[{
expand: true,
cwd: 'src/js',
src: '**/*.js',
dest: 'dist/js'
}]
}
},
concat:{
js:{
src:
'dist/**/*.js',
dest: 'dist/index.min.js'

}
}

});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-concat');
// 默认任务
grunt.registerTask('default', ['uglify', 'concat']);
}

这里加深的是js 要合并文件,同时需要加载模块及默认执行任务。

执行

grunt

在当前目录下生成dist目录

dist /

index.min.js

同理

css压缩也是一样的。

grunt 合并压缩js和css文件(二)的更多相关文章

  1. 使用grunt合并压缩js、css文件

    需要了解的知识: 1.nodejs的安装与命令行使用 2.nodejs安装应用 3.grunt的初步了解 本文已假定读者已经熟悉以上知识. 好,我们继续: 任务1:将src目录下的所有zepto及插件 ...

  2. [Asp.net MVC]Bundle合并,压缩js、css文件

    摘要 在web优化中有一种手段,压缩js,css文件,减少文件大小,合并js,css文件减少请求次数.asp.net mvc中为我们提供一种使用c#代码压缩合并js和css这类静态文件的方法. 一个例 ...

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

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

  4. [转][前端优化]使用Combres合并对js、css文件的请求

    本文转自:http://www.cnblogs.com/parry/archive/2011/01/28/Reduce_Http_Request_Using_Combres_For_Js_Css.ht ...

  5. yui压缩JS和CSS文件

    CSS和JS文件经常需要压缩,比如我们看到的XX.min.js是经过压缩的JS. 压缩文件第一个是可以减小文件大小,第二个是对于JS文件,默认会去掉所有的注释,而且会去掉所有的分号,也会将我们的一些参 ...

  6. 简单使用grunt、bower工具合并压缩js和css

    前段时间因为项目中的报表写了一个Jquery插件,开源到github上,参考以往大神们写的插件的姿势,决定搞了像模像样一点.言归正传.前端工程师对这些工具:Node,bower,grunt,npm这些 ...

  7. (转)使用yuicompressor-maven-plugin压缩js及css文件(二)

    本文介绍通过使用yuicompressor-maven-plugin插件实现js及css代码的自动压缩,方便集成到持续集成环境中,如jenkins. 一.配置yuicompressor-maven-p ...

  8. 使用yuicompressor-maven-plugin压缩js及css文件

    本文介绍通过使用yuicompressor-maven-plugin插件实现js及css代码的自动压缩,方便集成到持续集成环境中,如jenkins. 一.配置yuicompressor-maven-p ...

  9. 【前端】一句命令快速合并压缩 JS、CSS

    引用自:一句命令快速合并 JS.CSS 在项目开发环境下,我们会把 JS 代码尽可能模块化,方便管理和修改,这就避免不了会出现一个项目自身 JS 文件数量达到10个或者更多. 而项目上线后,会要求将所 ...

随机推荐

  1. JavaPersistenceWithMyBatis3笔记-第3章SQL Mappers Using XMLs-001

    一. 1.Mapper 2.Service 3.Domain package com.mybatis3.domain; import java.io.Serializable; import java ...

  2. Android调试之Logcat

    转贴  http://www.cnblogs.com/adison/p/4264284.html 在Android开发过程中,总免不了要调试,无论是Debug,还是Android自带的Logcat,抑 ...

  3. 图测试题部分总结.ing

    一个无向连通图的生成树是含有该连通图的全部顶点的(极小连通子图) 在有向图G的拓扑序列中,若顶点Vi在顶点Vj之前,则下列情形不可能出现的是(D)A.G中有弧<Vi,Vj> B.G中有一条 ...

  4. 美团热更新Robust Demo演示

    1.Android Studio clone 远程Robust项目源码 gradle 同步依赖资源,可能需要半个小时左右. 2.生成样例apk包 配置app module下build.gradle 插 ...

  5. 读取word

    目标:将word中数据转存到数据库 实质:数据的读写 难点:word文件格式的处理(识别,读取),/ 提取word有效的相关字段 实现: 1.基础了解:word(文字处理应用程序/文档工具)软件   ...

  6. String类-小用

    字符串-string (1)string在Java中是一个引用类型,string变量可引用一个字符串对象 (2) 例1: s0,s1,s2引用同一个对象 New创建的两个string是不同的对象只是内 ...

  7. ACM 离散化处理

    使用STL算法离散化: 思路:先排序,再删除重复元素,然后就是索引元素离散化后对应的值. 1.  unique():   头文件为algorithm unique的作用是“去掉”容器中相邻元素的重复元 ...

  8. [SinGuLaRiTy] KM算法

    [SinGuLaRiTy-1018] Copyright (c) SinGuLaRiTy 2017. All Rights Reserved. Some Method Are Reproduced F ...

  9. 【bzoj2434】: [Noi2011]阿狸的打字机 字符串-AC自动机-BIT

    [bzoj2434]: [Noi2011]阿狸的打字机 x串在y串上的匹配次数就是y在自动机所有节点上能够通过fail走到x最后一个节点的个数 (就是y串任意一个前缀的后缀能匹配到x的个数)和[bzo ...

  10. [bzoj2743][HEOI2012]采花(树状数组)

    题目描述 萧薰儿是古国的公主,平时的一大爱好是采花. 今天天气晴朗,阳光明媚,公主清晨便去了皇宫中新建的花园采花. 花园足够大,容纳了n朵花,花有c种颜色(用整数1-c表示),且花是排成一排的,以便于 ...