km之路--006 前端工程化一 grunt

時間 2019-12-11

標籤之路前端工程 grunt 欄目 Node.js 简体版

原文原文鏈接

grunt 簡介

一句話：自動化。對於須要反覆重複的任務，例如壓縮（minification）、編譯、單元測試、linting等，自動化工具能夠減輕你的勞動，簡化你的工做。當你在 Gruntfile 文件正確配置好了任務，任務運行器就會自動幫你或你的小組完成大部分無聊的工做。css

文檔：http://www.gruntjs.net/getting-started前端

安裝grunt-cli

grunt分爲兩種，一種是服務端，一種是客戶端，而咱們須要安裝的就是客戶端：grunt-clinginx

npm install -g grunt-cli

而後就能夠可使用grunt-cli了git

laolang@laolang-PC:~$ grunt -v
grunt-cli: The grunt command line interface (v1.2.0)

Fatal error: Unable to find local grunt.

If you're seeing this message, grunt hasn't been installed locally to
your project. For more information about installing and configuring grunt,
please see the Getting Started guide:

http://gruntjs.com/getting-started
laolang@laolang-PC:~$

若是提示grunt命令未找到，那就須要你手動創建grunt的軟連接了github

建立項目

npm init

輸入必要信息以後就建立好了apache

在當前項目安裝gruntnpm

npm install grunt --save-dev

編寫Gruntfile.js

這是一個標磚的JS文件，主要包括：
1. 任務配置代碼
2. 插件加載代碼
3. 任務註冊代碼
切全部的代碼須要在以下結構中：json

module.exports = function(grunt) {

};

合併文件

github: https://github.com/gruntjs/grunt-contrib-concatsass

安裝grunt-contrib-concat服務器

npm install --save-dev grunt-contrib-concat

配置

 1 module.exports = function(grunt) {
 2 
 3     var sassStyle = 'expanded';
 4 
 5     grunt.initConfig({
 6         pkg: grunt.file.readJSON('package.json'),
 7         concat: {
 8             options: {
 9                 stripBanners: true
10 
11             },
12             distPlugin: {
13                 src: ['./src/plugin-one.js', './src/plugin-two.js'],
14                 dest: './global.js'
15             },
16             distCore: {
17                 src: ['./src/core-one.js', './src/core-two.js'],
18                 dest: './core.js'
19             }
20         }
21     });
22 
23     grunt.loadNpmTasks('grunt-contrib-concat');
24 
25     grunt.registerTask('concatjs',['concat']);
26     grunt.registerTask('default');
27 
28 };

說明

options是配置項，可配置的有好多個，我如今只用到了stripBanners，當這個屬性爲true時，會在合併的時候刪除註釋

option時候的就是合併任務了,能夠和我示例中寫的同樣,也能夠像下面這樣:

 1 grunt.initConfig({
 2   concat: {
 3     basic_and_extras: {
 4       files: {
 5         'dist/basic.js': ['src/main.js'],
 6         'dist/with_extras.js': ['src/main.js', 'src/extras.js'],
 7       },
 8     },
 9   },
10 });

我目前仍是比較傾向於分幾個子任務

壓縮JS文件

github : https://github.com/gruntjs/grunt-contrib-uglify

安裝grunt-contrib-uglify

npm install grunt-contrib-uglify --save-dev

引入

grunt.loadNpmTasks('grunt-contrib-uglify');

配置

uglify: {
    compressjs: {
        files: {
            './global.min.js': ['./global.js'],
            './core.min.js' : ['./core.js']
        }
    }
}

能夠配置的有不少,我目前什麼屬性都沒配置,所有是默認值

註冊任務

grunt.registerTask('compressjs',['concat','jshint','uglify']);

這意思是說compressjs會執行 concat jshint uglify這三個任務

如今個人配置

 1 module.exports = function(grunt) {
 2 
 3     grunt.initConfig({
 4         pkg: grunt.file.readJSON('package.json'),
 5         concat: {
 6             options: {
 7                 stripBanners: true
 8 
 9             },
10             distPlugin: {
11                 src: ['./src/plugin-one.js', './src/plugin-two.js'],
12                 dest: './global.js'
13             },
14             distCore: {
15                 src: ['./src/core-one.js', './src/core-two.js'],
16                 dest: './core.js'
17             }
18         },
19         uglify: {
20             compressjs: {
21                 files: {
22                     './global.min.js': ['./global.js'],
23                     './core.min.js' : ['./core.js']
24                 }
25             }
26         },
27         jshint: {
28             all: ['./global.js']
29         }
30 
31     });
32 
33 
34     grunt.loadNpmTasks('grunt-contrib-concat');
35     grunt.loadNpmTasks('grunt-contrib-jshint');
36     grunt.loadNpmTasks('grunt-contrib-uglify');
37 
38 
39     grunt.registerTask('concatjs',['concat']);
40     grunt.registerTask('compressjs',['concat','jshint','uglify']);
41     grunt.registerTask('default',['compressjs']);
42 
43 };