具体node及文件配置请看:

grunt 安装使用(一)

要压缩的文件

  1. --src/
  2. ajax.js
  3. assets.js
  4. touch.js
  5. zepto.js

目录结构:

  1. dist/
  2. node_modules/
  3. src/
  4. Gruntfile.js
  5. package.json
  6. package.json是依赖库文件
  7. Gruntfile.js是执行步骤程序

一、js合并压缩

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

1.package.json文件

  安装所需要的依赖文件

  1. {
  2. "name": "grunt_test",
  3. "version": "1.0.0",
  4. "devDependencies": {
  5. "grunt": "^1.0.1",
  6. "grunt-contrib-concat": "^1.0.1",
  7. "grunt-contrib-uglify": "^3.0.1"
  8. }
  9. }

安装命令:

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

 2.Gruntfile.js

这个文件是配配置文件

  1. module.exports = function (grunt) {
  2. // 项目配置
  3. grunt.initConfig({
  4. pkg: grunt.file.readJSON('package.json'),
  5. uglify:{
  6. js:{
  7. files:[{
  8. expand: true,
  9. cwd: 'src/js',
  10. src: '**/*.js',
  11. dest: 'dist/js'
  12. }]
  13. }
  14. },
  15. concat:{
  16. js:{
  17. src: 'dist/**/*.js',
  18. dest: 'dist/index.min.js'
  19. }
  20. }
  21. });
  22. grunt.loadNpmTasks('grunt-contrib-uglify');
  23. grunt.loadNpmTasks('grunt-contrib-concat');
  24. // 默认任务
  25. grunt.registerTask('default', ['uglify', 'concat']);
  26. }

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

执行

  1. grunt

在当前目录下生成dist目录

dist /

  1. 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. DWR原理探秘

    DWR原理探秘 DWR(Direct Web Remoting)远程Web命令;是一个用于改善web页面与Java类交互的远程服务器端Ajax开源框架,可以帮助开发人员开发包含AJAX技术的网站.它可 ...

  2. .NET 一般处理程序使用Session

    .ashx中引用 session必须 using System.Web.SessionState ,继承IReadOnlySessionState/IRequiresSessionState IRea ...

  3. ueditor UEditor的setContent的时候报错

    今天在使用UEditor的setContent的时候报错,报错代码如下 TypeError: me.body is undefined 或 Uncaught TypeError: Cannot set ...

  4. Django之博客系统:用户注册和Profile

    前面章节介绍了用户的登录,退出.这一章将介绍用户的注册.首先需要创建一个表单来让用户填写用户名,密码等信息.创建UserRegistrationFrom表单.并指定model为User类 from d ...

  5. CHNS类

    NS类集合介绍 1.常用部分 NSDictionary NSString NSArray 数组 NSTimer 定时器 NSRange 范围 NSNotification 2.网络相关 NSURLCo ...

  6. yum源安装Percona

    yum源安装更为简单,方便.话不多说,开始吧. 1.下载yum源 yum -y install https://www.percona.com/redir/downloads/percona-rele ...

  7. P3379 【模板】最近公共祖先(LCA)(LCT)

    \(\color{#0066ff}{ 题目描述 }\) 如题,给定一棵有根多叉树,请求出指定两个点直接最近的公共祖先. \(\color{#0066ff}{输入格式}\) 第一行包含三个正整数N.M. ...

  8. 字符串格式化str.format

    一.字符串格式化之str.format 1.位置参数:用{0},{1},{2}表示位置 v1 = '{1},{0},{1}'.format('a','b') #输出b,a,b 2.关键词参数:用{na ...

  9. iOS端VR视频播放(转自简书http://www.jianshu.com/p/1ee1a0d1d320)

    下面是我看了谷歌的一个VR在iOS端开发的文档写的一个demo. 第一步是需要用cocoaPods导入谷歌开发的一个第三方:CardboardSDK,怎么导入就不多说了,这里需要注意的一点是谷歌方面的 ...

  10. 在Mvc中,ExpandoObjec类的使用

    创建一个基本mvc项目 1.向Models目录下添加一个类文件MyModel.cs文件,代码如下: using System; using System.Collections.Generic; us ...