引用：使用grunt 压缩 合并js、css文件

引用:https://www.jianshu.com/p/08c7babdec65

压缩 js 文件

1、创建一个目录 名为grunt

 

目录.png

2、在grunt目录下创建一个 src目录，存放我们要压缩、合并的js文件。

 

图片.png

3、创建package.json文件

 

文件.png

• package.json文件，包含了项目的一些信息，如项目的名称、描述、版本号、依赖包等。
  package.json文件中的内容如下：

{
        "name": "grunt",
        "file": "zepto",
        "version": "0.1.0",
        "description": "demo",
        "devDependencies": {
            "grunt": "~0.4.0"，
           "grunt-contrib-requirejs": "~0.4.1",
        }
}

执行命令 npm install 下载相关文件，成功后在下载压缩js文件所需要的grunt-contrib-uglify插件，并更新package.json文件。

 

js压缩插件安装.png

安装成功后package.json文件内容如下：

{
  "name": "grunt",
  "file": "zepto",
  "version": "0.1.0",
  "description": "demo",
  "license": "MIT",
  "devDependencies": {
    "grunt": "~0.4.1",
   "grunt-contrib-requirejs": "~0.4.1",
    "grunt-contrib-uglify": "^3.0.1"   //js压缩插件

  }
}

4、创建Gruntfile.js 文件

Gruntfile.js 文件就是一个普通的js文件，几乎所有的任务都定义在该文件中。
Gruntfile.js 文件内容如下：

module.exports = function (grunt) {
  // 项目配置
    grunt.initConfig({
    //grunt.file.readJSON 将我们的配置文件读出，并且转换为json对象
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
       options: {
    //  压缩输出头信息
          banner: '/*! <%= pkg.file %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
         },
       build: {
           src: 'src/<%=pkg.file %>.js',          //压缩src文件夹下的xxx.js文件为xxx.min.js 并放到dest文件夹。
          dest: 'dest/<%= pkg.file %>.min.js'
      }
    }
  });
  // 加载提供"uglify"任务的插件
  grunt.loadNpmTasks('grunt-contrib-uglify');
  // 默认任务
  grunt.registerTask('default', ['uglify']);
}

4、执行grunt任务

 

压缩执行结果.png

在dest文件中就生成了zepto.min.js文件，如果没有 dest文件会自动创建一个dest文件夹。

 

图片.png

整个目录结构如下：

 

图片.png

合并 js 文件

合并js依赖于 "grunt-contrib-concat"插件，下载grunt-contrib-concat插件并更新package.json文件。

{
       "name": "grunt",
        "file": "zepto",
        "version": "0.1.0",
        "description": "demo",
        "devDependencies": {
            "grunt": "~0.4.0",
           "grunt-contrib-requirejs": "~0.4.1",
            "grunt-contrib-concat": "~0.1.1"       //合并文件
            "grunt-contrib-uglify": "~0.1.2",      //压缩，采用UglifyJs
        }
}

Gruntfile.js 内容修改如下：

module.exports = function (grunt) {
  // 项目配置
  grunt.initConfig({
      pkg: grunt.file.readJSON('package.json'),
        concat: {
             options: {
                        separator: ';'
                     },
             dist: {
                //合并三个 js 到 libs.js 文件
                 src: ['src/zepto.js', 'src/underscore.js', 'src/backbone.js'],
                 dest: 'dest/libs.js'
            }
      }
  });
  grunt.loadNpmTasks('grunt-contrib-concat');
  // 默认任务
  grunt.registerTask('default', ['concat']);
}

生成的 libs.js文件

 

合并.png

整个目录结构：

 

图片.png

合并 并压缩js 文件

Gruntfile.js文件内容如下：

module.exports = function (grunt) {
  // 项目配置
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    //合并js
    concat: {
      dist: {
        src: ['src/zepto.js', 'src/underscore.js', 'src/backbone.js'],
        dest: 'dest/libs.js'
      }
    },
//压缩合并后的js文件
    uglify: {
      build: {
        src: 'dest/libs.js',
        dest: 'dest/libs.min.js'
      }
    }
  });
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-concat');
  // 默认任务
  grunt.registerTask('default', ['concat', 'uglify']);
}

 

合并 压缩.png

压缩css 文件

首先要安装插件 grunt-contrib-cssmin，并更新package.json文件。

 

插件安装.png

package.json文件内容更新如下

{
  "name": "grunt",
  "file": "zepto",
  "version": "0.1.0",
  "description": "demo",
  "license": "MIT",
  "devDependencies": {
    "grunt": "~0.4.1",
   "grunt-contrib-requirejs": "~0.4.1",
    "grunt-contrib-concat": "~0.1.1",
    "grunt-contrib-cssmin": "^2.2.0",
    "grunt-contrib-uglify": "~0.2.1",
  },
  "dependencies": {
    "cssmin": "^0.4.3",
    "express": "3.x"
  }
}

Gruntfile.js文件内容：

module.exports = function (grunt) {
  // 项目配置
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
     cssmin:{
            options:{
                stripBanners:true, //合并时允许输出头部信息
                banner:'/*!<%= pkg.file %> - <%= pkg.version %>-'+'<%=grunt.template.today("yyyy-mm-dd") %> */\n'
            },
            build:{
                src:'src/css/index.css',//压缩
                dest:'dest/css/index.min.css' //dest 是目的地输出
            }
        }
  });
  grunt.loadNpmTasks('grunt-contrib-cssmin');
  // 默认任务
  grunt.registerTask('default', ['cssmin']);
}

执行命令 grunt

 

图片.png

结果生成index.min.css

 

压缩.png

合并css 文件

合并css文件用的插件是grunt-contrib-concat，上面已经安装过了，直接看Gruntfile.js中的代码。

module.exports = function (grunt) {
  // 项目配置
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    concat: {
      options: {
        separator: ';'
      },
      cssConcat: {
        src: ['src/css/zepto.css', 'src/css/underscore.css', 'src/css/backbone.css'],
        dest: 'dest/css/libs.css'
      }
    },
  });
  grunt.loadNpmTasks('grunt-contrib-concat');
  // 默认任务
  grunt.registerTask('default', ['concat']);
}

执行grunt命令，结果生成libs.css文件

 

合并.png

合并js、css文件并压缩文件

package.json文件

{
  "name": "grunt",
  "file": "zepto",
  "version": "0.1.0",
  "description": "demo",
  "license": "MIT",
  "devDependencies": {
    "grunt": "~0.4.1",
    "grunt-contrib-concat": "~0.1.1",   //合并js css 插件
    "grunt-contrib-cssmin": "^2.2.0",     //压缩css插件
     "grunt-contrib-uglify": "~0.2.1",     //压缩js插件
    "grunt-contrib-jshint": "~0.6.3",
    "grunt-contrib-requirejs": "~0.4.1",
    "grunt-strip": "~0.2.1"
  },
  "dependencies": {
    "cssmin": "^0.4.3",
    "express": "3.x"
  }
}

Gruntfile.js文件：

module.exports = function (grunt) {
  // 项目配置
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    concat: {
      options: {
        separator: ';'
      },
      //合并css
      cssConcat: {
        src: ['src/css/zepto.css', 'src/css/underscore.css', 'src/css/backbone.css'],
        dest: 'dest/css/libs.css'
      },
      //合并js
      jsConcat:{
          src:['src/zepto.js','src/underscore.js','src/backbone.js'],
          dest:'dest/libs.js'
      }
    },
    //压缩css
    cssmin:{
            options:{
                stripBanners:true, //合并时允许输出头部信息
                banner:'/*!<%= pkg.file %> - <%= pkg.version %>-'+'<%=grunt.template.today("yyyy-mm-dd") %> */\n'
            },
            build:{
                src:'dest/css/libs.css',//压缩
                dest:'dest/css/libs.min.css' //dest 是目的地输出
            }
        },
   //压缩js
   uglify: {
      build: {
        src: 'dest/libs.js',
        dest: 'dest/libs.min.js'
      }
    }
  });
  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-cssmin');
  // 默认任务
  grunt.registerTask('default', ['concat','uglify','cssmin']);
}

执行命令grunt，结果

 

图片.png

作者：赵碧菡
链接：https://www.jianshu.com/p/08c7babdec65
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。