grunt 合并壓縮js和css檔案（二）

標籤：concat   config   模組   node   html   www   mod   pac   載入   

具體node及檔案配置請看：

grunt 安裝使用（一）

 

要壓縮的檔案

--src/  ajax.js  assets.js  touch.js  zepto.js

 

目錄結構：

dist/node_modules/src/Gruntfile.jspackage.jsonpackage.json是依賴庫檔案Gruntfile.js是執行步驟程式

 

 

一、js合并壓縮

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

 

1.package.json檔案

  安裝所需要的依賴檔案

{  "name": "grunt_test",  "version": "1.0.0",  "devDependencies": {    "grunt": "^1.0.1",    "grunt-contrib-concat": "^1.0.1",    "grunt-contrib-uglify": "^3.0.1"  }}

 

安裝命令：

cnpm install grunt-contrib-concat --save-dev

 

 2.Gruntfile.js

這個檔案是配設定檔

module.exports = function (grunt) {  // 項目配置  grunt.initConfig({    pkg: grunt.file.readJSON(‘package.json‘),    uglify:{      js:{        files:[{          expand: true,          cwd: ‘src/js‘,          src: ‘**/*.js‘,          dest: ‘dist/js‘        }]      }    },    concat:{      js:{         src: ‘dist/**/*.js‘,         dest: ‘dist/index.min.js‘      }    }  });  grunt.loadNpmTasks(‘grunt-contrib-uglify‘);  grunt.loadNpmTasks(‘grunt-contrib-concat‘);  // 預設任務  grunt.registerTask(‘default‘, [‘uglify‘, ‘concat‘]);}

 

這裡加深的是js 要合并檔案，同時需要載入模組及預設執行任務。

執行

grunt

在目前的目錄下產生dist目錄

dist / 

index.min.js

同理

css壓縮也是一樣的。

 

grunt 合并壓縮js和css檔案（二）