使用grunt合並壓縮js、css文件

需要了解的知識：

1、nodejs的安裝與命令行使用

2、nodejs安裝應用

3、grunt的初步了解

 

本文已假定讀者已經熟悉以上知識。

 

好，我們繼續：

任務1：將src目錄下的所有zepto及插件合並，並壓縮。

--src/
    ajax.js
    assets.js
    callbacks.js
    data.js
    deferred.js
    detect.js
    event.js
    form.js
    fx.js
    fx_methods.js
    gesture.js
    ie.js
    ios3.js
    selector.js
    stack.js
    touch.js
    zepto.js

 

目錄結構：

dist/
node_modules/
src/
Gruntfile.js
package.json

package.json是依賴庫文件

Gruntfile.js是執行步驟程序

 

一、js合並壓縮

第一次需要先安裝grunt。執行 npm install -g grunt-cli 進行安裝。如果已經安裝，可以忽略。

1.package.json文件

{
  "name": "demo",
  "file": "zepto",
  "version": "0.1.0",
  "description": "demo",
  "license": "MIT",
  "devDependencies": {
    "grunt": "~0.4.1",
    "grunt-contrib-jshint": "~0.6.3",
    "grunt-contrib-concat": "~0.5.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"
  }
}

 2.Gruntfile.js

module.exports = function (grunt) {
  grunt.initConfig({
  concat: {
    options: {
    },
    dist: {
      src: ['src/**/*.js'],//src文件夾下包括子文件夾下的所有文件
      dest: 'dist/built.js'//合並文件在dist下名為built.js的文件
    }
  },
  uglify: {
     build: {
        src: 'dist/built.js',//壓縮源文件是之前合並的buildt.js文件
        dest: 'dist/built.min.js'//壓縮文件為built.min.js
      }
   }
});
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-concat');
  
  grunt.registerTask('default', ['concat','uglify']);
}

執行步驟：

(1)安裝依賴，已安裝可以忽略： npm install 。將會下載依賴的文件到node_modules目錄。

(2)執行合並壓縮： grunt 

>grunt
Running "concat:dist" (concat) task
File dist/built.js created.

Running "uglify:build" (uglify) task
File "dist/built.min.js" created.

Done, without errors.

將會在dist目錄生成

built.js
built.min.js

 

任務2：將src/css目錄下的所有css文件合並，並壓縮。

二、對CSS進行合並壓縮

需要安裝grunt-css。執行 npm install grunt-css 安裝。安裝成功，下載到 node_modules/grunt-css 。如果已經安裝，可以忽略。

1、package.json同上；

2、Gruntfile.js如下：

module.exports = function (grunt) {
  grunt.initConfig({
  concat: {//css文件合並
    css: {
      src: ['src/css/*.css'],//當前grunt項目中路徑下的src/css目錄下的所有css文件
      dest: 'dist/all.css'  //生成到grunt項目路徑下的dist文件夾下為all.css
    }
  },
  cssmin: { //css文件壓縮
     css: {
        src: 'dist/all.css',//將之前的all.css
        dest: 'dist/all.min.css'  //壓縮
      }
   }
});
grunt.loadNpmTasks('grunt-css');
grunt.loadNpmTasks('grunt-contrib-concat');
  
  grunt.registerTask('default', ['concat','cssmin']);
}

 

參考：

1、 Grunt中文網

http://www.gruntjs.net/getting-started

 

(完結)