使用grunt合并壓縮js和css文件的方法

更新時(shí)間：2017年03月02日 10:38:18 作者：飛鴻影~

這篇文章主要介紹了使用grunt合并壓縮js和css文件的方法,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下

需要了解的知識(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是依賴庫文件
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)安裝依賴，已安裝可以忽略： npm install 。將會(huì)下載依賴的文件到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文件合并，并壓縮。

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

參考：

1、 Grunt中文網(wǎng)

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

以上所述是小編給大家介紹的使用grunt合并壓縮js和css文件的方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: