欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

使用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是依賴(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']);
}

參考:

1、 Grunt中文網(wǎng)

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

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

相關(guān)文章

最新評(píng)論