`

grunt合并压缩js、css文件

 
阅读更多

转载文章:

http://www.cnblogs.com/yexiaochai/p/3594561.html

http://www.cnblogs.com/yexiaochai/p/3602002.html

http://www.cnblogs.com/snandy/archive/2013/03/07/2946989.html

http://www.cnblogs.com/snandy/archive/2013/03/11/2949177.html

http://www.cnblogs.com/snandy/archive/2013/05/20/3088613.html

以上两个牛人的文章写得已经很棒了,我只奉上我的文件,package.json和Gruntfile.js

对js文件进行压缩并且合并操作

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']);
}

 对CSS进行合并压缩

如有没有下载cssmin的话,需要下载

在nodejs命令行中输入 npm install grunt-css

等待下载即可

package.json如上

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']);
}

 

 

分享到:
评论

相关推荐

    利用grunt合并压缩文件

    利用grunt合并、压缩js、css文件,简单罗列步骤,初学者易学

    grunt压缩、合并js/css

    grunt压缩、合并js/css

    混合开发:node grunt混淆压缩 android中的angularjsionic 文件

    我在做混淆的时候,先要检测一下css、js文件语法的正确性,然后在合并、压缩、混淆;在混淆的过程,js文件出现了问题,Directive,Config,Factory混淆会出问题,运行不出来,我现在也没有解决;如果是原生的js代码...

    用grunt合并requireJS的模块文件,压缩css,images

    标题中的“用grunt合并requireJS的模块文件,压缩css,images”揭示了本文将探讨如何使用Grunt自动化工具来处理JavaScript模块化、CSS样式表以及图片资源的优化。Grunt是基于Node.js的一个构建工具,它能帮助开发者...

    使用grunt合并压缩js和css文件的方法

    任务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 ...

    js css文件合并工具

    JavaScript和CSS文件的合并是前端性能优化的一个常见策略,被称为"文件合并"或"资源打包"。当浏览器加载一个页面时,每个外部资源(如js或css文件)都需要一个单独的HTTP请求,这会增加整体的加载时间。如果一个页面...

    js css文件压缩工具

    3. **HTTP/2**:使用HTTP/2协议,支持多路复用,可以同时发送多个js和css文件,避免阻塞问题。 四、自动化流程 为了方便和高效,开发者通常会结合构建工具(如Webpack、Gulp、Grunt等)设置自动化流程,自动执行js...

    前端js和css的压缩合并之grunt

    Grunt提供了多种插件来实现这一点,例如`grunt-contrib-uglify`用于JavaScript文件压缩,`grunt-contrib-cssmin`则专注于CSS文件的压缩。 2. **合并文件**:将多个小文件合并为一个大文件,以减少HTTP请求次数,...

    grunt-demo:使用grunt工具压缩合并css 和 js

    如何将多个js文件合并压缩为一个js文件为什么要合并、压缩你的JS文件?在开始之前,先重申一下这个问题。因为经常在帮忙改东西的时候看到HTML页面上引用了N个JS,而通常看到这个就知道这人JS写得有多糟糕了。HTML里...

    js、css文件压缩工具

    首先,JS和CSS文件的压缩主要涉及两个方面:代码压缩和代码混淆。代码压缩是通过删除不必要的字符(如空格、注释和换行)来减小文件大小,这一过程通常不会影响代码的功能。代码混淆则是改变代码结构,使得代码难以...

    compres实现js、css压缩合并

    4. 在部署时,服务器将只返回这些合并压缩后的文件,而不是原始的多个文件。 总的来说,通过JS和CSS的压缩合并,我们可以显著提升网页的加载速度,减少服务器负载,并提高用户满意度。这一技术是现代Web开发不可或...

    图片压缩,CSS压缩,JS压缩

    Grunt提供了一个插件`grunt-contrib-cssmin`,它能够合并多个CSS文件并进行最小化处理,包括删除空格、转换颜色和长度单位等,从而提高加载速度。 然后,我们讨论JS压缩。JavaScript是网站动态功能的核心,但未经...

    使用yuicompressor压缩及合并js,css静态资源

    在IT行业中,优化网站性能是至关重要的,其中一项关键技术就是对JavaScript和CSS文件进行压缩和合并。本篇文章将深入探讨如何使用Yahoo的开源工具——YUI Compressor来实现这一目标。 YUI Compressor是由Yahoo开发...

    压缩JS和CSS工具

    因此,为了提升网页性能,开发者通常会使用"压缩JS和CSS工具"对这些文件进行优化,减少它们的大小,从而加快页面加载速度。本文将深入探讨JS和CSS压缩的原理、方法以及TBCompressor这款工具的应用。 JS和CSS压缩的...

    maven打包使用yui压缩css和js文件

    在现代Web开发中,优化网页性能是至关重要的,其中一项策略就是对CSS和JavaScript文件进行压缩,以减少页面加载时间。Maven作为一个强大的Java项目管理工具,提供了与各种构建优化工具集成的能力,其中包括使用YUI ...

    Js、Css压缩(可批量)

    对于批量处理多个Css文件,可以结合使用构建工具,如Gulp或Webpack的插件,实现一键压缩。 三、版权信息的附加 在压缩过程中,保留版权信息是法律要求,也是尊重他人劳动成果的表现。大多数压缩工具都提供了保留或...

    利用yuicompressor来对js、css文件压缩

    **JavaScript和CSS文件压缩的重要性** 在现代Web开发中,优化网页加载速度是至关重要的,因为这直接影响到用户体验和搜索引擎排名。其中,JavaScript和CSS文件的大小是影响加载速度的重要因素。大尺寸的脚本和样式...

    JsCss压缩和Css格式化

    除了压缩,这些工具还能自动合并多个CSS文件,消除重复的属性值,以及应用CSS的最小化写法。例如,将`margin: 0 auto;`压缩为`margin:0 auto;`。 **CSS格式化** CSS格式化则相反,它用于将压缩后的CSS代码恢复成易...

    JS CSS压缩工具

    使用JS CSS压缩工具时,开发者通常会将其整合到构建流程,如使用 Gulp、Grunt 或 Webpack 这样的任务运行器。这些构建工具可以自动化处理源代码,包括编译、压缩、合并等操作,确保每次构建后生成的是优化过的生产...

Global site tag (gtag.js) - Google Analytics