首页 > 代码库 > 用Grunt进行CSS文件压缩
用Grunt进行CSS文件压缩
假设你的项目的CSS文件全部放在项目目录下名为css的文件夹中,现在将它压缩合并成一个名为main-min.css的文件,放在css-min文件夹下。
(1)首先保证机器安装了node.js.
(2)在项目的目录下建立名为package.json的文件,用于配置需要安装的npm包,package.json的内容如下:
{ "author": "evan <evan@evantahler.com>", "name": "CSS_ZIP", "description": "CSS压缩", "version": "0.0.1", "engines": { "node": ">=0.8.0" }, "dependencies": { "grunt" : "~0.4.2", "grunt-contrib-uglify" : "~0.2.7", "grunt-contrib-concat" : "~0.3.0", "grunt-contrib-cssmin" : "x" } }
必须填写的是dependencies部分,需要用json格式填上npm包上的名称和版本号,版本号用x来代替。这里我们用了Grunt和Grunt的一个用于合并压缩CSS的插件grunt-contrib-cssmin。
(3)完成以上后,从命令行进入项目目录下,(需要对Node.js的命令操作有所了解)执行命令:npm install
该命令会新建一个名为node——module的文件夹(如果不存在),将Grunt以及Grunt插件安装在该文件夹下。
(4)编写Grunt配置文件Gruntfile.js。在项目目录下新建Gruntfile.js作为Grunt的配置文件,内容如下:
module.exports = function(grunt) { // Do grunt-related things in here // 配置 grunt.initConfig({ concat : { options: { separator: ‘;‘, stripBanners: true }, dist : { src: [‘page/jquery.js‘, ‘page/jquery_md5.js‘,‘page/moment.js‘,‘page/main.js‘], dest: ‘dist/main.js‘ } }, uglify : { build : { src : ‘dist/main.js‘, dest : ‘dist/main.min.js‘ } }, cssmin: { options: { keepSpecialComments: 0 }, compress: { files: { ‘css-min/main-min.css‘: [ "css/*.css" ] } } } }); // 载入concat和uglify插件,分别对于合并和压缩 grunt.loadNpmTasks(‘grunt-contrib-concat‘); grunt.loadNpmTasks(‘grunt-contrib-uglify‘); grunt.loadNpmTasks(‘grunt-contrib-cssmin‘); // 注册任务 grunt.registerTask(‘default‘, [‘concat‘, ‘uglify‘,‘cssmin‘]); }
(5)上一步完成后,在命令行中执行:Grunt
这时,就可以看到后台自动新建了一个名为css-min的文件夹,文件夹中是一个名为css-min.css的文件,内容是css文件中css文件的合并压缩后的结果,最终的目录结构图如下:
以后如果CSS文件被修改,只要执行Grunt命令就可以了。
用Grunt进行CSS文件压缩
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。