用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了。
用GruntJS合并、压缩CSS资源文件的更多相关文章
- grunt自定义任务——合并压缩css和js
npm文档:www.npmjs.com grunt基础教程:http://www.gruntjs.net/docs/getting-started/ http://www.w3cplus.com/to ...
- 使用grunt完成requirejs的合并压缩和js文件的版本控制
最近有一个项目使用了 requirejs 来解决前端的模块化,但是随着页面和模块的越来越多,我发现我快要hold不住这些可爱的js文件了,具体表现在每个页面都要设置一堆 requirejs 的配置( ...
- 前端自动化(三) 合并压缩css、压缩js、添加时间戳、打包上线操作
前端自动化(三) 合并压缩css.压缩js.添加时间戳.打包上线操作 此文在前两篇基础上对比参考,会很方便理解 gulp.task("delete",function(){ r ...
- uglifyjs 合并压缩 js, clean-css 合并压缩css
本文主要介绍如何通过CLI命令行(也就是终端或者cmd打开的那个shell窗口)实现 js和 css 的合并压缩. uglifyjs 合并压缩 js: 1.安装node 这一步就不多说了,下载node ...
- vs合并压缩css,js插件——Bundler & Minifier
之前做了一个大转盘的抽奖活动,因为比较火,部分用户反馈看不到页面的情况,我怀疑js加载请求过慢导致,所以今天针对之前的一个页面进行调试优化. 首先想到的是对页面的js和css进行压缩优化,百度了下vs ...
- ASP.NET MVC 扩展HtmlHelper类为 js ,css 资源文件添加版本号
写在前面 在项目部署当中会需要更新 css 文件或 js 等资源文件,为了避免由于浏览器缓存的原因无法加载新的 css 或 js ,一般的做法是在资源文件的后面加上一个版本号来解决,这样浏览器就会去服 ...
- 批量压缩 css js 文件 包含多个文件 自动识别
注意事项 css 注释压缩不会造成影响 因为是块注释 当然也可以选择去注释压缩 js 带注释压缩 要注意注意 注意 //行注释会造成 压缩后的代码在一行 导致注释后的代码都失效 ...
- GruntJs安装及使用入门(自定义grunt任务,合并压缩js、css)
一.Grunt.js简介(实现自动化) 1)简要说明: 1.GruntJs是基于node的javascript命令行工具,可以自动化构建.测试.生成文档的项目管理工具: 2.使用GruntJs可以自动 ...
- 使用Ant和YUICompressor链接合并压缩你的JS和CSS代码
JS代码和CSS代码在上线前要压缩大家应该都是知道的了.记得之前做项目的时候,最后要交差的时候是找了个网站,将JS代码的文件一个一个地复制,粘贴,复制,粘贴. 当时就在想:TMD有没有好一点的方法,劳 ...
随机推荐
- iphone手机不同版本兼容、横竖屏
/* 兼容问题*/ @media screen and (device-width: 320px) and (device-height: 480px) and (-webkit-device-pix ...
- 内容分发网络CDN(互联网技术)
内容分发网络(互联网技术)CDN的全称是Content Delivery Network,即内容分发网络.其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节,使内容传输的更快.更 ...
- 【项目总结】之——导出Excel
近来接手的项目,有几个很值得分享的东西.经过自己的不懈实践,总结,分享给大家,希望能对大家的学习有点帮助. 本次探讨的是mvc框架之中的一种导出方法,导出excel. 先让大家看一下啊我们的view界 ...
- adb server is out of date. killing解决方法
adb server is out of date. killing完美解决 今天,久未出现的著名的“adb server is out of date. killing”又发生了,在此,将解决方 ...
- SpringMVC解析2-ContextLoaderListener
对于SpringMVC功能实现的分析,我们首先从web.xml开始,在web.xml文件中我们首先配置的就是ContextLoaderListener,那么它所提供了功能有哪些又是如何实现的?当使用编 ...
- 《DSP using MATLAB》示例Example4.7
ROC分三种情况:
- mongodb学习02基础知识
文档 键值对的一个有序集 文档被表示为对象 文档必须有一个 _id 键 {"greeting" : "Hello, world!"}` 键 文档的键是字符串 区 ...
- 移动终端app测试点总结
以下所有测试最后必须在真机上完整的执行1.安装.卸载测试 在真机上的以及通过91等第三方的安装与卸载 安装在手机上还是sd卡上 2.启动app测试3.升级测试 数字签名.升级覆盖安装.下载后手动覆盖安 ...
- Spring进阶—如何用Java代码实现邮件发送(二)
http://www.cnblogs.com/itsource/p/4266905.html
- LightOJ1018 Brush (IV)(状压DP)
题目大概说一个平面有n个灰尘,可以用一把刷子直直刷过去清理直线上的所有灰尘,问最少要刷几下才能清理完所有灰尘. 首先怎么刷其实是可以确定的,或者说直线有哪些是可以确定的,而最多就有C(n,2)条不一样 ...