grunt

Gruntfile.js

module.exports = function(grunt) {
    // 配置
    grunt.initConfig({
        pkg : grunt.file.readJSON('package.json'),
        concat : {
            css : {
                options : {
                    banner : '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
                },
                src: ['css/base.css','css/common.css''],
                dest: 'dest/asset/css/site.css'
            },
            js : {
                options : {
                    banner : '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
                },
                src: ['a.js'],
                dest: 'dest/asset/js/a.js'
            }
        },
        cssmin: {
            options : {
                banner : '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
            },
            css: {
                src: 'dest/asset/css/site.css',
                dest: 'dest/asset/css/site-min.css'
            }
        },
        uglify : {
            options : {
                banner : '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
            },
            build : {
                src : 'dest/asset/js/a.js',
                dest : 'dest/asset/js/a.min.js'
            }
        }
    });
    // 載入concat和css插件，分別對於合併和壓縮
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-css');
    // 默認任務
    grunt.registerTask('default', ['concat', 'cssmin','uglify']);
};

 

 

package.json

{
  "name": "name",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.0",
    "grunt-contrib-jshint": "~0.1.1",
    "grunt-contrib-uglify": "~0.1.2",
    "grunt-contrib-concat": "~0.1.1",
    "grunt-css":   ">0.0.0"
  }
}

 

 

壓縮js

var fs  = require('fs');
var jsp = require("./uglify-js").parser;
var pro = require("./uglify-js").uglify;
 
var origCode = "var abc = function(){ var one = 5; return one;}";
var ast = jsp.parse(origCode); // parse code and get the initial AST
ast = pro.ast_mangle(ast); // get a new AST with mangled names
ast = pro.ast_squeeze(ast); // get an AST with compression optimizations
var finalCode = pro.gen_code(ast); // compressed code here
console.log(finalCode);

css

文章出自：http://www.php100.com/html/it/qianduan/2015/0115/8377.html

 

前端打包的工具備不少，我用的習慣的就是這個grunt，不管是你要在github上作開源，仍是讓本身的項目變得更易於維護，grunt都是首選。

 

 

 

 

網上的安裝教程很是多了，這裏就只是介紹一下都有哪些好用的插件。

 

1：grunt-contrib-less

 

less,可讓css變得更簡單，更易於維護，他能夠定義常量，能夠轉換單位，還能夠計算顏色，他用嵌套把咱們從重複的排列選擇器的漩渦中拯救出來。

 

因此若是你想成爲一個好的前端，或者一個喜歡偷懶的人，那麼，less、sass或者jade這些東西儘可能涉獵一些，會對效率的提高幫助極大。

 

grunt-contrib-less很容易，用處就是把less轉換成css，只須要注意一下，如今先不要壓縮，由於咱們還有不少事情要作。
 

 

2：grunt-autoprefixer

 

autoprefixer，他是我近期的發現，看到他我對我從前對付瀏覽器私有屬性的方式感到羞愧。

 

你們必定對寫css的時候的那些瀏覽器私有屬性很噁心了，關鍵是誰都沒有心情去背到底這個屬性那個瀏覽器存在私有前綴，因此 webkit moz ms o 通通都要寫上去，一條語句，寫了5遍。

 

那麼，有了autoprefixer，咱們就不須要再兼顧他們了，或者說，autoprefixer會幫咱們把這些作了。

 

好比咱們在less裏寫：

 

 

1. .test{

2.  
3. transform:rotate(20deg);
4.  
5. transition: 1s;
6.  
7. background-image: linear-gradient(to bottom, #444444, #999999);
8.  
9. }

 

 

 

 

 

那麼生成的css就是：

 

 

 

 

1. .test {

2.  
3. background-image: -webkit-linear-gradient(top, #444, #999);
4.  
5. background-image: linear-gradient(to bottom, #444, #999);
6.  
7. -webkit-transition: 1s;
8.  
9. transition: 1s;
10.  
11. -webkit-transform: rotate(20deg);
12.  
13. -ms-transform: rotate(20deg);
14.  
15. transform: rotate(20deg);
16.  
17. }

 

 

 

 

 

這樣子的。美觀大方。恩恩···

 

 

 

3：grunt-contrib-csslint

 

csslint ，他會幫咱們查出一些語法上的錯誤，什麼？css有什麼語法錯誤。其實也不算是錯誤，算是一些不規範的寫法吧。

 

好比說我寫了：display:inline-block;float:left;

 

那麼他就會報錯給你說：

 

 

不過他須要一個.csslintrc的配置文件，這個網上都有，能夠本身擴充或刪減，由於有的錯誤，是不必的。

 

 

 

4：grunt-csscomb

 

csscomb，他能夠把你寫的css按照最優的順序排出來，便於閱讀，並且也很規範，別人看到了這樣的css文件會特別的舒服。

 

好比我寫了這樣一堆亂七八糟的東西：···

 

 

 

 

1. .a{

2.  
3. position:absolute;width:100px;float:left;height:100px;display:block;top:20px;font-size:12px;line-height:20px;margin-top:30px;padding-left:10px;
4.  
5. transform:rotate(20deg);
6.  
7. }

 

 

 

 

 

那麼他會幫我編譯成:

 

 

1. .a {

2.  
3. position: absolute;
4.  
5. top: 20px;
6.  
7. display: block;
8.  
9. float: left;
10.  
11. width: 100px;
12.  
13. height: 100px;
14.  
15. padding-left: 10px;
16.  
17. margin-top: 30px;
18.  
19. font-size: 12px;
20.  
21. line-height: 20px;
22.  
23. -webkit-transform: rotate(20deg);
24.  
25. -ms-transform: rotate(20deg);
26.  
27. transform: rotate(20deg);
28.  
29. }

 

 

 

 

 

美美的。

 

固然他也須要本身的配置文件.csscomb.json
 

 

5：grunt-contrib-cssmin

 

顧名思義，文件壓縮。沒什麼好說的額。

 

配置方法你們能夠網上去找，或者直接去他們的github上看文檔，說的都很詳細。

 

以上就是css的grunt配置，合起來用，就能幫你寫出優雅的css文件。

 

文章出自：http://www.cnblogs.com/hubcarl/p/4095122.html 

grunt.initConfig方法

用於模塊配置，它接受一個對象做爲參數。該對象的成員與使用的同名模塊一一對應。

每一個目標的具體設置，須要參考該模板的文檔。就cssmin來說，minify目標的參數具體含義以下：

• expand：若是設爲true，就表示下面文件名的佔位符（即*號）都要擴展成具體的文件名。
• cwd：須要處理的文件（input）所在的目錄。
• src：表示須要處理的文件。若是採用數組形式，數組的每一項就是一個文件名，可使用通配符。
• dest：表示處理後的文件名或所在目錄。
• ext：表示處理後的文件後綴名。

 

grunt經常使用函數說明：

grunt.initConfig：定義各類模塊的參數，每個成員項對應一個同名模塊。
grunt.loadNpmTasks：加載完成任務所需的模塊。
grunt.registerTask：定義具體的任務。第一個參數爲任務名，第二個參數是一個數組， 表示該任務須要依次使用的模塊。

 

grunt經常使用模塊：

• grunt-contrib-clean：刪除文件。
• grunt-contrib-compass：使用compass編譯sass文件。
• grunt-contrib-concat：合併文件。
• grunt-contrib-copy：複製文件。
• grunt-contrib-cssmin：壓縮以及合併CSS文件。
• grunt-contrib-imagemin：圖像壓縮模塊。
• grunt-contrib-jshint：檢查JavaScript語法。
• grunt-contrib-uglify：壓縮以及合併JavaScript文件。
• grunt-contrib-watch：監視文件變更，作出相應動做。

 

package.json 包依賴關係：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38

{    "name" :  "grunt-study" ,    "version" :  "1.0.0" ,    "description" :  "study" ,    "main" :  "index.js" ,    "scripts" : {      "test" :  "test"    },    "repository" : {      "type" :  "git" ,      "url" :  "https://github.com/hubcarl"    },    "devDependencies" :{      "matchdep" :  "latest" ,      "shelljs" :  "latest" ,      "ngmshell" :  "latest" ,      "grunt" :  "latest" ,      "grunt-contrib-clean" :  "latest" ,      "grunt-contrib-concat" :  "latest" ,      "grunt-contrib-copy" :  "latest" ,      "grunt-contrib-connect" :  "latest" ,      "grunt-contrib-htmlmin" :  "latest" ,      "grunt-contrib-cssmin" :  "latest" ,      "grunt-contrib-imagemin" :  "latest" ,      "grunt-contrib-uglify" :  "latest" ,      "grunt-contrib-watch" :  "latest" ,      "grunt-usemin" :  "latest" ,      "connect-livereload" :  "latest"    },    "keywords" : [      "grunt"    ],    "author" :  "bluesky" ,    "license" :  "BSD-2-Clause" ,    "bugs" : {      "url" :  "https://github.com/hubcarl"    } }

　　

Gruntfile.js配置css、image、javascript、html壓縮

  1 module.exports = function (grunt) {
  2 
  3   require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);
  4 
  5   grunt.initConfig({
  6 
  7     //清除目錄
  8     clean: {
  9       all: ['dist/html/**', 'dist/*.*'],
 10       image: 'dist/html/images',
 11       css: 'dist/html/css',
 12       html: 'dist/html/**/*'
 13     },
 14 
 15     copy: {
 16       src: {
 17         files: [
 18           {expand: true, cwd: 'src', src: ['*.html'], dest: 'dist/html'}
 19         ]
 20       },
 21       image: {
 22         files: [
 23           {expand: true, cwd: 'src', src: ['images/*.{png,jpg,jpeg,gif}'], dest: 'dist/html'}
 24         ]
 25       }
 26     },
 27 
 28     // 文件合併
 29     concat: {
 30       options: {
 31         separator: ';',
 32         stripBanners: true
 33       },
 34       js: {
 35         src: [
 36           "src/js/*.js"
 37         ],
 38         dest: "dist/html/js/app.js"
 39       },
 40       css:{
 41         src: [
 42           "src/css/*.css"
 43         ],
 44         dest: "dist/html/css/main.css"
 45       }
 46     },
 47 
 48     //壓縮JS
 49     uglify: {
 50       prod: {
 51         options: {
 52           mangle: {
 53             except: ['require', 'exports', 'module', 'window']
 54           },
 55           compress: {
 56             global_defs: {
 57               PROD: true
 58             },
 59             dead_code: true,
 60             pure_funcs: [
 61               "console.log",
 62               "console.info"
 63             ]
 64           }
 65         },
 66 
 67         files: [{
 68             expand: true,
 69             cwd: 'dist/html',
 70             src: ['js/*.js', '!js/*.min.js'],
 71             dest: 'dist/html'
 72         }]
 73       }
 74     },
 75 
 76     //壓縮CSS
 77     cssmin: {
 78       prod: {
 79         options: {
 80           report: 'gzip'
 81         },
 82         files: [
 83           {
 84             expand: true,
 85             cwd: 'dist/html',
 86             src: ['css/*.css'],
 87             dest: 'dist/html'
 88           }
 89         ]
 90       }
 91     },
 92 
 93     //壓縮圖片
 94     imagemin: {
 95       prod: {
 96         options: {
 97           optimizationLevel: 7,
 98           pngquant: true
 99         },
100         files: [
101           {expand: true, cwd: 'dist/html', src: ['images/*.{png,jpg,jpeg,gif,webp,svg}'], dest: 'dist/html'}
102         ]
103       }
104     },
105 
106     // 處理html中css、js 引入合併問題
107     usemin: {
108       html: 'dist/html/*.html'
109     },
110 
111     //壓縮HTML
112     htmlmin: {
113       options: {
114         removeComments: true,
115         removeCommentsFromCDATA: true,
116         collapseWhitespace: true,
117         collapseBooleanAttributes: true,
118         removeAttributeQuotes: true,
119         removeRedundantAttributes: true,
120         useShortDoctype: true,
121         removeEmptyAttributes: true,
122         removeOptionalTags: true
123       },
124       html: {
125         files: [
126           {expand: true, cwd: 'dist/html', src: ['*.html'], dest: 'dist/html'}
127         ]
128       }
129     }
130 
131   });
132 
133 
134   grunt.registerTask('prod', [
135     'copy',                 //複製文件
136     'concat',               //合併文件
137     'imagemin',             //圖片壓縮
138     'cssmin',               //CSS壓縮
139     'uglify',               //JS壓縮
140     'usemin',               //HTML處理
141     'htmlmin'               //HTML壓縮
142   ]);
143 
144   grunt.registerTask('publish', ['clean', 'prod']);
145 };

index.html發佈以前內容：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

<! DOCTYPE  html> < html > < head >      < title >Grunt 測試</ title >      < meta  charset="utf-8">      <!-- build:css css/main.css -->      < link  rel="stylesheet" href="css/common.css">      < link  rel="stylesheet" href="css/web.css">      <!-- endbuild -->        <!-- build:js js/main.js -->      < script  src="js/zepto.js"></ script >      < script  src="js/common.js"></ script >      < script  src="js/service.js"></ script >      <!-- endbuild --> </ head > < body > < p ></ p > Hello,Grunt! </ body > </ html >

執行grunt publish以後：

<!DOCTYPE html><html><head><title>Grunt 測試</title><meta charset=utf-8><link rel=stylesheet href=css/main.css><script src=js/main.js></script><body><p></p>Hello,Grunt<body><html>

文章出自：http://www.cnblogs.com/snandy/p/3534862.html

任務（Tasks）是grunt的核心概念，你所作的不少工做好比資源合併（concat）、壓縮（uglify）都是在配置任務。
每次grunt運行的時候，你指定的一個或多個任務也在運行，若是你沒有指定任務，那麼一個默認名爲「default」的任務將自動運行。

 

有時咱們須要寫一些本身的grunt任務，下面是一個具體例子

 

1、準備

1. 新建一個目錄g1
2. 新建package.json，放入g1
3. 新建Gruntfile.js，放入g1

package.json

1 2 3 4 5 6 7 8 9

{      "name" :  "g1" ,      "version" :  "0.1.0" ,      "author" :  "@snandy" ,      "homepage" :  "http://www.g1.com" ,      "devDependencies" : {          "grunt" :  "~0.4.0"      } }

4. cd進入g1，npm install安裝grunt包

 

這整個目錄結構以下

 

Gruntfile.js暫時空着。

 

2、建立一個最簡單的任務

grunt.registerTask(taskName, [description,] taskFunction)

taskName 任務名稱，命令行裏使用 grunt + taskName
description 任務的描述
taskFunction 任務的實現

 

Gruntfile.js裏填入一下代碼

1 2 3 4 5 6 7 8 9 10 11

module.exports =  function (grunt) {      grunt.registerTask( 'mytask' ,  '一個最簡單的任務演示，根據參數打印不一樣的輸出.' ,  function (arg1, arg2) {          if  (arguments.length === 0) {              grunt.log.writeln( '任務'  +  this .name +  ", 沒有傳參數" );          }  else  if  (arguments.length === 1) {              grunt.log.writeln( '任務'  +  this .name +  ", 有一個參數是"  + arg1);          }  else  {              grunt.log.writeln( '任務'  +  this .name +  ", 有兩個參數分別是"  + arg1 +  ", "  + arg2);          }      }); };

註冊了一個任務「mytask」，實現一個最簡單的根據所傳參數不一樣實現不一樣的打印輸出，看運行結果咱們須要進入命令行。

 

進入到g1目錄，輸入 grunt mytask

 

再輸入 grunt mytask:snandy

任務名後面加一個冒號就能夠傳參了

 

再輸入 grunt mytask:snandy:backus

冒號間隔能夠傳多個參數

 

3、一次建立多個任務

grunt.registerMultiTask(taskName, [description,] taskFunction)

 

 

能夠看到參數是同樣的，方法名不一樣。但使用方式卻不太同，須要先初始化config，Gruntfile.js以下

1 2 3 4 5 6 7 8 9 10 11 12 13

module.exports =  function (grunt) {      grunt.initConfig({          log: {              t1: [1, 2, 3],              t2:  'hello world' ,              t3:  false          }      });        grunt.registerMultiTask( 'log' ,  'Log stuff.' ,  function () {          grunt.log.writeln( this .target +  ': '  +  this .data);      }); };

 

進入g1目錄，分別測試下

輸入 grunt，會依次執行三個子任務t1,t2,t3

 

分別輸入 grunt log:t1, grunt log:t2, grunt log:t3

 

4、任務間通信

在一個任務內部能夠調用另一個任務，以下

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

module.exports =  function (grunt) {        grunt.registerTask( 'mytask' ,  '一個最簡單的任務演示，根據參數打印不一樣的輸出.' ,  function (arg1, arg2) {          if  (arguments.length === 0) {              grunt.log.writeln( '任務'  +  this .name +  ", 沒有傳參數" );          }  else  if  (arguments.length === 1) {              grunt.log.writeln( '任務'  +  this .name +  ", 有一個參數是"  + arg1);          }  else  {              grunt.log.writeln( '任務'  +  this .name +  ", 有兩個參數分別是"  + arg1 +  ", "  + arg2);          }      });        grunt.registerTask( 'default' ,  '默認的任務' ,  function () {          // 調用mytask          grunt.task.run( 'mytask:param1:param2' )      }) };

進入命令行，輸入grunt

 

調用多個任務，以逗號分隔傳給run方法便可，或者以數組形式

1 2 3 4 5

grunt.registerTask( 'default' ,  '默認的任務' ,  function () {      grunt.task.run( 'mytask1' ,  'mytask2' )      // 或者      grunt.task.run([ 'mytask1' ,  'mytask2' ])    })