用GruntJS合并、压缩CSS资源文件

合并、压缩CSS资源文件用到了grunt-contrib-concat、grunt-css插件,自己npm就可以了,下面直接呈上package.json、Gruntfile.js代码

package.json代码如下:

{
  "name": "BeJS",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.0",
    "grunt-contrib-concat": "~0.1.1",
    "grunt-css":   ">0.0.0"
  }
}

Gruntfile.js代码如下:

module.exports = function(grunt) {
    // 配置
    grunt.initConfig({
        pkg : grunt.file.readJSON(‘package.json‘),
        concat : {
            css : {
                src: [‘src/asset/*.css‘],
                dest: ‘dest/asset/all.css‘
            }
        },
        cssmin: {
            css: {
                src: ‘dest/asset/all.css‘,
                dest: ‘dest/asset/all-min.css‘
            }
        }
    });
    // 载入concat和css插件,分别对于合并和压缩
    grunt.loadNpmTasks(‘grunt-contrib-concat‘);
    grunt.loadNpmTasks(‘grunt-css‘);
    // 默认任务
    grunt.registerTask(‘default‘, [‘concat‘, ‘cssmin‘]);
};

最后执行grunt任务就ok了。

时间: 2024-11-08 23:56:42

用GruntJS合并、压缩CSS资源文件的相关文章

使用grunt完成requirejs的合并压缩和js文件的版本控制

最近有一个项目使用了 requirejs 来解决前端的模块化,但是随着页面和模块的越来越多,我发现我快要hold不住这些可爱的js文件了,具体表现在每个页面都要设置一堆 requirejs 的配置( baseUrl , paths 之类的). 不知谁说过,一些事重复做了三次,就该考虑一下自动化了,于是我小心翼翼的掏出了我的 grunt . 我们得使用 grunt-contrib-requirejs 这个插件来实现如上所说的自动化功能,这个就是根据 r.js 封装的 grunt 插件. 安装 gr

合并压缩css和Js的方式

[文章作者:磨延城 转载请注明原文出处: https://mo2g.com/view/74/] 本篇博客从减少浏览器加载外部资源连接数的思考角度着手,要想深入了解其他加快网页显示速度的原理,估计又得花不少时间,这需要把前端跟后端都说解释清楚.有时间我会分开写其他部分的内容.这里为了节省时间,只介绍如何减少网页需要加载的外部资源,加快浏览器的响应速度. 本篇博客从减少浏览器加载外部资源连接数的思考角度着手,要想深入了解其他加快网页显示速度的原理,估计又得花不少时间,这需要把前端跟后端都说解释清楚.

vs合并压缩css,js插件——Bundler & Minifier

之前做了一个大转盘的抽奖活动,因为比较火,部分用户反馈看不到页面的情况,我怀疑js加载请求过慢导致,所以今天针对之前的一个页面进行调试优化. 首先想到的是对页面的js和css进行压缩优化,百度了下vs集成的插件,貌似没有很好的支持,自己在vs里找了一个非常满意的插件——Bundler & Minifier 这个vs插件下载地址:点我 插件功能说明: 1.合并多个css,js,html文件为一个单独的文件 2.保存源文件自动重新组合. 3.压缩css,js,html文件 等等...(其他我没用到,

grunt——合并压缩css和js

npm文档:www.npmjs.com [GruntFile.js] module.exports = function(grunt) { grunt.initConfig({ timestamp:'<%= grunt.template.today("yyyymmddHHMM") %>', jspath:'app/js/', csspath:'app/css/', concat: { js:{ options: { separator: ';' }, src: [ &quo

静态资源文件自动压缩并替换成压缩版本(大型网站优化技术)

原文:静态资源文件自动压缩并替换成压缩版本(大型网站优化技术) 这一次,我总结和分享一项大型网站优化技术,那就是在项目中自动压缩静态资源文件(css.js),并让网站自动加载压缩后的资源文件.当然,这项技术在雅虎35条前端优化建议里也有记载,但它那只是给出一个理论的方案而已,并且采用的是外部压缩工具去压缩,而在我的项目中,是直接通过自己的程序自动化去压缩所有css.js文件,然后让页面直接加载所压缩后的资源,接下来直接进入主题. 本次实验使用的是PHP脚本语言,版本是PHP5.6,是在LINUX

使用Ant和YUICompressor链接合并压缩你的JS和CSS代码

JS代码和CSS代码在上线前要压缩大家应该都是知道的了.记得之前做项目的时候,最后要交差的时候是找了个网站,将JS代码的文件一个一个地复制,粘贴,复制,粘贴. 当时就在想:TMD有没有好一点的方法,劳资不想老是用Ctrl大法.啊啊啊啊啊啊啊啊阿~.最最坑爹的是,有时候将代码复制粘贴的时候手一抖可能就删了点什么东西,手一快又保存了,反正各种坑爹.坑到没朋友. 但是呢,不压缩也不是是吧? 在写JS代码渐渐多了起来的时候就发现手动压缩根本不是长远的方法.而且JS的代码也开始分块,分功能,分文件写了,尽

在项目生成时就合并压缩你的js

对网站优化来讲,合并压缩js.css等静态内容是必修课之一,一则可以节省宽带:二则可以减少http请求:三则加快了网站的访问速度 对于如何实现合并压缩js 方案一: 继承IHttpModule ,对http进行拦截,然后获取其<script src=*> tag,将js文件取出来合并成为一个资源文件 方案二:如果你用的web解决方案为 asp.net mvc 4,那么当然可以用Bundle技术. 方案三:不依赖任何服务器技术,本地先合并压缩好后再上传 本文着重讲解方案三 要合并文件,可以用do

使用gulp自动化打包合并前端静态资源(CSS、JS文件压缩、添加版本号)

现在正在做的项目更新迭代比较频繁,会经常对前端代码打包部署,手动整合代码文件很麻烦并且浪费时间,所以决定使用gulp来代替手工完成这项工作. 前端静态资源在发版更新时会面临客户端浏览器缓存的问题(可参考这篇文章),解决这个问题可以采用两类方法:覆盖方法(引用资源时加版本号,不修改资源文件名).非覆盖方法(修改资源文件名),本篇文章主要采用的是第一种加版本号的方式,主要用gulp给静态资源自动加版本号和压缩CSS.JS. 原理:通过对JS,CSS文件内容进行Hash运算,生成一个文件的唯一Hash

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

需要了解的知识: 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