具体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. 数据结构 happiness

    问题描述 这一天是小 V 的生日,他收到了朋友们送给他的礼物.现在,小 V 有 n 件礼物,他将这 n 件礼物排成一排,依次编号为 1 到 n,每件礼物都有一个满意值 w[i].现在小 V 要从中选取 ...

  2. Ubuntu16.04版安装VMwareTools的步骤和没法挂载目录问题的解决

    vmtool安装流程 1.点击vmware 里面的虚拟机——>安装vmware tool 2.然后(等待一会)弹出一个界面把里面的 VMwareTools-9.6.1-1378637.tar.g ...

  3. margin,CSS边距重叠

    CSS外边距叠加就是margin-collapse,边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距,水平边 距永远不会重合. 重叠结果计算规则: 两个相邻的外边距都是正数时,折叠结果是它 ...

  4. HTML5与CSS3设计模式 中文版 高清PDF扫描版

    HTML5与CSS3设计模式是一部全面讲述用HTML5和CSS3设计网页的教程.书中含350个即时可用的模式 (HTML5和CSS3代码片段),直接复制粘贴即可使用,更可以组合起来构建出无穷的解决方案 ...

  5. tomcat的日志文件权限与启动用户的权限不一致

    用户work的文件权限(umask=0002)为 u=rwx,g=rwx,o=rx 但是tomcat的日志文件的权限却是:为什么会不一样呢? 这是因为tomcat在启动(catalina.sh)时会重 ...

  6. cin、cout、cerr、clog------c++ Primer Plus

    cin对象与标准输入流相对应. cout对象与标准输出流相对应. cerr对象与标准错误流相对应,常用于程序错误信息,不缓冲,直接被发送给屏幕. clog对象也对应标准错误流(这点儿和cerr是一样的 ...

  7. win10更新后IE不见了

    只是快捷方式不见了,到C:\Program Files\internet explorer\iexplore.exe就看到了,可以正常运行

  8. ASP SQLDATASOURCE

    原文链接:http://blog.csdn.net/dodream/article/details/4887076

  9. hdu1162(最小生成树 prim or kruscal模板)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1162 意义:给出一些点,用线问使所有点直接或间接连通,需要多长: 思路:裸最小生成树: 法1: pri ...

  10. P3879 [TJOI2010]阅读理解

    \(\color{#0066ff}{ 题目描述 }\) 英语老师留了N篇阅读理解作业,但是每篇英文短文都有很多生词需要查字典,为了节约时间,现在要做个统计,算一算某些生词都在哪几篇短文中出现过. \( ...