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

时间:2022-12-14 18:39:58

合并、压缩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. 《数据结构与算法Python语言描述》习题第二章第二题(python版)

    ADT Date: #定义日期对象的抽象数据类型 Date(self, int year, int month, int day) #构造表示year/month/day的对象 difference( ...

  2. spring-data-solr官方学习文档介绍

    spring-data-solr文档介绍如下: 通过http://www.springframework.org/schema/data/solr/spring-solr-1.0.xsd(spring ...

  3. kubernetes实现用户自定义扩缩容

    本文章主要参考walkthrough,aggregation和auth.涉及custom metric API的注册认证以及API server aggregation的相关知识.walkthroug ...

  4. JavaScript switch 语句

    switch 语句用于基于不同的条件来执行不同的动作. JavaScript switch 语句 请使用 switch 语句来选择要执行的多个代码块之一.你可以在JavaScript编程实战中了解怎么 ...

  5. require、缓存

    什么是require? -Node使用CommonJS模块规范,内置require函数用于加载模块文件 -require的基本功能是>读入并执行一个javascript文件,然后返回该模块的ex ...

  6. 第k小的元素

    利用快排思想,如果标志位大于k,则第k小的数字在左边,否则在右边.(程序是第k大的元素) #include <iostream> #include <vector> using ...

  7. 警告!中国90&percnt;AI初创企业将在两年内落败出局

    https://mp.weixin.qq.com/s/-RkyLda1jovaHBlBTsi-BA 近年来,中国涌现了一大批AI初创企业,但AI热潮也伴随着泡沫.由于近期市场资金紧缩,投资者发出警告, ...

  8. 检查许可证所需的adobe application manager 丢失或损坏

    安装Adobe公司的一般都需要账号,记得以前安装Flex也是,这里提供一个公用账号: 帐号:992829179@qq.com 密码:521521 在安装Acrobat_Ⅺ_Pro_11.0.03后,弹 ...

  9. ArrayDeque

    ArrayDeque是一个基于数组的,非线程安全的,没有容量大小限制的双端队列实现 下面这张图就是添加了一些元素的数据结构图,其中head指向数据结构中的头部元素,tail指向数据结构中最后一个元素. ...

  10. 一些技巧 &amp&semi;&amp&semi; 常数优化 &amp&semi;&amp&semi; 出现の错误

    开坑原因 7.21 今天DTZ大爷教了我一个算欧拉函数的好方法......是质因数复杂度的 这让我想到,这些小技巧小idea,很多时候,可能就是考场上最致命.最一击必杀的"大招" ...