合并、压缩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了。

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

  1. grunt自定义任务——合并压缩css和js

    npm文档:www.npmjs.com grunt基础教程:http://www.gruntjs.net/docs/getting-started/ http://www.w3cplus.com/to ...

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

    最近有一个项目使用了 requirejs 来解决前端的模块化,但是随着页面和模块的越来越多,我发现我快要hold不住这些可爱的js文件了,具体表现在每个页面都要设置一堆 requirejs 的配置( ...

  3. 前端自动化(三) 合并压缩css、压缩js、添加时间戳、打包上线操作

    前端自动化(三)   合并压缩css.压缩js.添加时间戳.打包上线操作 此文在前两篇基础上对比参考,会很方便理解 gulp.task("delete",function(){ r ...

  4. uglifyjs 合并压缩 js, clean-css 合并压缩css

    本文主要介绍如何通过CLI命令行(也就是终端或者cmd打开的那个shell窗口)实现 js和 css 的合并压缩. uglifyjs 合并压缩 js: 1.安装node 这一步就不多说了,下载node ...

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

    之前做了一个大转盘的抽奖活动,因为比较火,部分用户反馈看不到页面的情况,我怀疑js加载请求过慢导致,所以今天针对之前的一个页面进行调试优化. 首先想到的是对页面的js和css进行压缩优化,百度了下vs ...

  6. ASP.NET MVC 扩展HtmlHelper类为 js ,css 资源文件添加版本号

    写在前面 在项目部署当中会需要更新 css 文件或 js 等资源文件,为了避免由于浏览器缓存的原因无法加载新的 css 或 js ,一般的做法是在资源文件的后面加上一个版本号来解决,这样浏览器就会去服 ...

  7. 批量压缩 css js 文件 包含多个文件 自动识别

    注意事项  css 注释压缩不会造成影响      因为是块注释     当然也可以选择去注释压缩 js 带注释压缩  要注意注意 注意  //行注释会造成 压缩后的代码在一行 导致注释后的代码都失效 ...

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

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

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

    JS代码和CSS代码在上线前要压缩大家应该都是知道的了.记得之前做项目的时候,最后要交差的时候是找了个网站,将JS代码的文件一个一个地复制,粘贴,复制,粘贴. 当时就在想:TMD有没有好一点的方法,劳 ...

随机推荐

  1. Oracle ASM

    一 Oracle ASM簡介 Oracle 10g推出的管理磁盤的新方式,用於取代LVM技術.主要用于RAC環境 二 Oracle ASM的配置安裝 1.安裝asm包 RedHat Linux5.x ...

  2. 跟着鸟哥学Linux系列笔记0-如何解决问题

    跟着鸟哥学Linux系列笔记0-扫盲之概念 在发生问题怎么处理: 1.  在自己的主机.网络数据库上查询How-To或FAQ -Linux 自身的文件数据: /usr/share/doc -CLDP中 ...

  3. C#交互功能的演化

    (此文章同时发表在本人微信公众号“dotNET每日精华文章”,欢迎右边二维码来关注.) 题记:Miguel de Icaza在最近发表的一篇博文中畅谈了Mono及其相关产品中的C#交互特性的演化情况. ...

  4. git checkout 命令详解

    转自:http://www.cnblogs.com/hutaoer/archive/2013/05/07/git_checkout.html?utm_source=tuicool&utm_me ...

  5. JDBC之——一个单线程JDBC基类和一些注意事项

    下面的一个DBase基类提供了一些jdbc的基本操作,配置文件的配置部分并不准确,只是在自己机器上的mysql中测试过.. 数据库的增删改方法中都在开始调用了getConnection方法,末尾调用了 ...

  6. 封装JavaScript的AJAX

    // 创建request对象 function createXMLHttpRequest() { try { return new XMLHttpRequest();//大多数浏览器 } catch ...

  7. EventBus的使用,数据传递

    通常情况下安卓下数据的传递有下面几种方法: 1.通过intent传递,包括显式意图和隐式意图,广播(Broadcast)和服务都能通过Intent传递 传递的数据类型包括8大基本数据类型    实现P ...

  8. c语言二维数组传递

    c语言二维数组传递,目前我总结三种方法,以及纠正一个不能使用的方法 /********************************* * 方法1: 第一维的长度可以不指定 * * 但必须指定第二维 ...

  9. Spring事务解析1-使用介绍

    spring的事务控制让我们从复杂的事务处理中得到解脱,是我们再也不需要去处理获得连接,关闭连接,事务提交和回滚等操作,再也不需要在事务相关的方法中处理大量的try..catch...finally代 ...

  10. AOP动态代理解析2-代码织入入口

    通过自定义配置完成了对AnnotationAwareAspectJAutoProxyCreator类型的自动注册,那么这个类到底做了什么工作来完成AOP的操作呢?首先我们看看AnnotationAwa ...