首页 > 代码库 > 用grunt对css代码进行压缩

用grunt对css代码进行压缩

1.先安装Node.js环境

Grunt和 Grunt 插件是通过 npm 安装并管理的,npm是 Node.js 的包管理器。Node.js的下载链接

安装完后进行验证

技术分享

 

2.安装grunt及插件

通过npm install grunt命令行来安装grunt

技术分享

 

安装完后文件夹里会多出node_modules文件夹和package-lock.json文件

技术分享

 

npm install -g grunt-cli

技术分享

他可以让你在项目的任意子目录中运行grunt 。

 

压缩css文件要用到的grunt插件是 grunt-contrib-cssmin所以我们通过命令行npm install grunt-contrib-cssmin来安装

技术分享

 

我们在box文件夹下安装,但是他会自动安装到node_modules文件夹中(ps:用‘cd’命令可以切换文件路径。切换磁盘直接 ‘盘符+:’即可)

 技术分享

 

3.配置package.json和Gruntfile.js文件

首先通过npm init来生成package.json文件,

技术分享

 

运行完后文件夹里就会多一个package.json文件

技术分享

文件内容如下所示:

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "grunt": "^1.0.1",
    "grunt-contrib-cssmin": "^2.2.0"
  },
  "devDependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "lg",
  "license": "ISC"
}

 

接下来配置Gruntfile.js文件

module.exports = function (grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON(‘package.json‘),
        cssmin: {
           files:{
              expand: true,      //必要的
              cwd: ‘src‘,           //要压缩的文件所在位置的固定路径
              src: ‘**/*.css‘,    //要压缩的文件所在位置
              dest: ‘dist‘,         //压缩后的文件所在位置
              ext:‘.min.css‘     //压缩后的文件命名
            } 
        }  
    });
    //运行grunt-contrib-cssmin插件
    grunt.loadNpmTasks(‘grunt-contrib-cssmin‘);

    //当输入grunt命令时运行grunt-contrib-cssmin
    grunt.registerTask(‘default‘, [‘cssmin‘]);
}

 

激动人心的时刻到了,下面就来压缩我们的css文件了

 技术分享

 输入grunt

技术分享

 

再俩看目录结构,可发现在dist下新建了一个css文件夹,结构和src文件夹保持一致

 技术分享

 

这是由于src: ‘**/*.css‘,  匹配了src文件夹下所有css文件,

技术分享

 ext:‘.min.css‘让我们压缩所有css文件,而不是单个文件。

 

好了Grunt压缩css就说完了,更多内容自然是参见grunt官网咯,官网

 

用grunt对css代码进行压缩