如何使用grunt合并壓縮js和css文件

這篇文章將為大家詳細(xì)講解有關(guān)如何使用grunt合并壓縮js和css文件，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

需要了解的知識(shí)：

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

2、nodejs安裝應(yīng)用

3、grunt的初步了解

本文已假定讀者已經(jīng)熟悉以上知識(shí)。

好，我們繼續(xù)：

任務(wù)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

目錄結(jié)構(gòu)：

dist/
node_modules/
src/
Gruntfile.js
package.json
package.json是依賴(lài)庫(kù)文件
Gruntfile.js是執(zhí)行步驟程序

一、js合并壓縮

第一次需要先安裝grunt。執(zhí)行 npm install -g grunt-cli 進(jìn)行安裝。如果已經(jīng)安裝，可以忽略。

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']);
}

執(zhí)行步驟：

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

(2)執(zhí)行合并壓縮： 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.

將會(huì)在dist目錄生成

built.js
built.min.js

任務(wù)2：將src/css目錄下的所有css文件合并，并壓縮。

二、對(duì)CSS進(jìn)行合并壓縮

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

1、package.json同上；

2、Gruntfile.js如下：

module.exports = function (grunt) {
 grunt.initConfig({
 concat: {//css文件合并
  css: {
   src: ['src/css/*.css'],//當(dāng)前grunt項(xiàng)目中路徑下的src/css目錄下的所有css文件
   dest: 'dist/all.css' //生成到grunt項(xiàng)目路徑下的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']);
}

關(guān)于“如何使用grunt合并壓縮js和css文件”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。