Grunt打包压缩JS CSS

前端优化其中之一就是在代码写好之后合并压缩文件再交付后台，对于没有应用打包工具的项目，我使用了Grunt来打包压缩相应的JS css文件。小白的使用方法：

1、安装Grunt

使用NPM来安装Grunt:（使用命令行）npm install -g grunt-cli

2、创建2个配置文件 package.json(npm install 下载相关的包) Gruntfile(启动打包相关事项)

打包JS的相关配置：

package：

{

  "name": "demo",

  "file": "libs",//JS名称（单个文件下需要，多个没关系）

  "version": "0.1.0",

  "description": "demo",

  "license": "MIT",

  "devDependencies": {

  "grunt": "~0.4.1",

  "grunt-contrib-jshint": "~0.6.3",

  "grunt-contrib-concat": "~0.3.0",

  "grunt-contrib-uglify": "~0.2.1",

  "grunt-contrib-requirejs": "~0.4.1",

  "grunt-contrib-copy": "~0.4.1",

  "grunt-contrib-clean": "~0.5.0",

  "grunt-strip": "~0.2.1"

  },

  "dependencies": {

    "express": "3.x"

  }

}

Gruntfile（多个文件）：

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

Gruntfile（单个文件）：

module.exports = function (grunt) {
  // 项目配置
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
      options: {
        banner: '/*! <%= pkg.file %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
      },
     build: {
        src: 'src/<%=pkg.file %>.js',
        dest: 'dest/<%= pkg.file %>.min.js'
      }
    }
  });
  // 加载提供"uglify"任务的插件
  grunt.loadNpmTasks('grunt-contrib-uglify');
  // 默认任务
  grunt.registerTask('default', ['uglify']);
}

src这些为目录的相对路径，然后在该目录下输入命令行 grunt即可。我的步骤是想把多个JS打包成一个，再对这个单个的JS进行压缩。

打包css的相关配置：

package:

{
  "name": "demo",
  "version": "0.1.0",
  "description": "demo",
  "license": "MIT",
  "devDependencies": {
  "grunt":"~0.4.0",
  "grunt-contrib-jshint": "~0.6.3",
"grunt-contrib-concat": "~0.3.0",
"grunt-contrib-uglify": "~0.2.1",
  "grunt-contrib-requirejs": "~0.4.1",
  "grunt-contrib-copy": "~0.4.1",
  "grunt-contrib-clean": "~0.5.0",
  "grunt-strip": "~0.2.1",
  "grunt-css":  ">0.0.0"
  },
  "dependencies": {
    "express": "3.x"
  }
}

Gruntfile（单个和多个通用）：

module.exports =function(grunt) {
    // 配置
  grunt.initConfig({
        pkg : grunt.file.readJSON('package.json'),
        concat : {
            css : {
                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']);
};

src这些为目录的相对路径，然后在该目录下输入命令行 grunt即可得到.min.css文件