合并、压缩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. Zero Copy 简介

    转自:http://blog.csdn.net/zzz_781111/article/details/7534649 许多web应用都会向用户提供大量的静态内容,这意味着有很多data从硬盘读出之后, ...

  2. 自己制作QQ空间音乐的具体方法

    1.打开QQ邮箱找到左栏下方的“文件中转站”--点击收藏文件--上传到收藏  将MP3或WMA音乐文件上传 上传完成点下载 下图:   2.点“保存”将最上面一排的地址全部复制  下图   3.为了更 ...

  3. 咱就入个门之NHibernate映射文件配置(二)

    上一篇主要介绍了NHibernate映射文件的基础配置,这篇我们介绍下NHibernate的一对多及多对一配置(文中我直接使用双向关联,即一和多两端都配置,开发中可以只使用一端),同时略带介绍下NHi ...

  4. 智能车学习(二十三)——浅谈心得体会

          因为毕竟是竞赛,跟学校挂钩,没办法开源代码和算法完成思路,所以不能详细写太多,如果可以等价交换的话,应该还是可以向领导申请一下的.       在厦大信科通信系,参加这个比赛,大家都觉得性 ...

  5. 【前台 ajax】web项目前台传递数组给后台 两种方式

    项目使用maven    springMVC 有需求 将前台的数组   在ajax中 送给后台 方式1: 前台代码:[注意:ajax中的属性---traditional:true,  ] 如果Post ...

  6. 使用Eclipse将Web项目打Jar包方法

    1.对下载.安装和运行Eclipse,就不再说了: 2.找到待打包项目: 3.右键,Export-->Export: 4.选择,Jar: 5.按如图操作: 6.完成后:

  7. 关于css的全面学习笔记

    1.text-align 属性规定元素中的文本的水平对齐方式.该属性通过指定行框与哪个点对齐,从而设置块级元素内文本的水平对齐方式.通过允许用户代理调整行内容中字母和字之间的间隔,可以支持值 just ...

  8. DSP using MATLAB 示例 Example3.15

    上代码: subplot(1,1,1); b = 1; a = [1, -0.8]; n = [0:100]; x = cos(0.05*pi*n); y = filter(b,a,x); figur ...

  9. DSP using MATLAB 示例Example2.4

    n = [0:10]; x = stepseq(0,0,10) - stepseq(10,0,10); [xe,xo,m] = evenodd(x,n); set(gcf,'Color',[1,1,1 ...

  10. CentOS下vm虚拟机桥接联网

    CentOS下vm虚拟机桥接联网   vm虚拟机下的桥接联网相当于虚拟机是一个独立的主机,直接与外网相连,这是比较好的连接方式,这样外网的机子就可以直接访问到虚拟机了.   首先虚拟机的联网方式设置为 ...