引用：使用grunt 壓縮 合併js、css文件

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

壓縮 js 文件

一、建立一個目錄 名爲grunt

 

目錄.png

二、在grunt目錄下建立一個 src目錄，存放咱們要壓縮、合併的js文件。

 

圖片.png

三、建立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壓縮插件 } } 

四、建立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']); } 

四、執行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 來源：簡書 簡書著做權歸做者全部，任何形式的轉載都請聯繫做者得到受權並註明出處。