grunt和前端模塊管理工具的簡單使用

時間 2020-03-16

原文原文鏈接

grunt的安裝及使用教程

grunt是一套前端自動化工具，一個基於nodeJs的命令行工具，通常用於：javascript

① 壓縮文件
② 合併文件
③ 簡單語法檢查

Grunt的運行工具具備兩個版本，一個是服務器端的版本（grunt），另外一個是客戶端版本(grunt-cli)。這裏咱們主要使用客戶端版本：css

$ sudo npm install -g grunt-cli
(加sudo貌似是osX10.10以後的版本才須要)

Grunt經常使用插件：html

1).grunt-contrib-uglify：壓縮js代碼
2).grunt-contrib-concat：合併js文件
3).grunt-contrib-qunit：單元測試
4).grunt-contrib-jshint：js代碼檢查
5).grunt-contrib-watch：文件監控

package.json和Gruntfile.js

package.json主要用於Node.js的包管理，好比Grunt插件安裝；
Gruntfile.js是Grunt配置文件，配置任務或者自定義任務。前端

這兩個文件必須放在項目的根目錄，而且和項目文件一塊兒提交java

安裝package.json

咱們能夠在終端經過npm init命令自動建立一個基本的package.json文件；能夠直接使用package.json文件模板：node

{ 
"name":"項目名稱", 
"version":"項目版本號", 
"description":"項目描述", 
"author":"項目建立者", 
"license":"項目版權", 
"devDependencies": { 
//項目依賴插件 
    } 
}

注：react

Dependencies可選字段，指示當前包所依賴的其餘包。

devDependencies可選字段。若是隻須要下載使用某些模塊，而不下載這些模塊的測試和文檔框架，放在這個下面比較不錯。

在package.json中最重要的就是name和version字段。他們都是必須的，若是沒有就沒法install。jquery

package.json的用法

description：放簡介，字符串。方便咱們在npm search中搜索。

keywords：關鍵字，數組、字符串。仍是方便咱們在npm search中搜索。

main：該字段是一個模塊ID，它是一個指向你程序的主要項目。就是說，若是你包的名字叫foo，而後用戶安裝它，而後require("foo")，而後你的main模塊的exports對象會被返回。

scripts：這是一個由腳本命令組成的hash對象，他們在包不一樣的生命週期中被執行。key是生命週期事件，value是要運行的命令。

其他能夠參照：https://github.com/ericdum/mu...webpack

安裝gruntfile.js文件

咱們能夠經過grunt-init來建立gruntfile.js文件，也能夠經過如下模板手工建立：git

module.exports = function(grunt) {
// 給grunt添加些設置
 grunt.initConfig({
     uglify: {
         options: {
             banner: '/*! 版權全部，這裏亂寫 */\n'
         },
         build: { src: 'src/core.js', //要壓縮的源文件，咱們也能夠用*表示通配，好比'src/*.js'
         dest: 'dst/core.js',//壓縮後輸出的位置，因爲是在根目錄，因此直接起個文件名就行
         }
     }
 });
 // 載入 "uglify" 插件任務
 grunt.loadNpmTasks('grunt-contrib-uglify');//引號內部爲插件名

 //定義默認須要執行的任務
 grunt.registerTask('default', ['uglify']);//uglify就是grunt任務
};

安裝插件：

能夠手動在package.json中添加Grunt的插件，也能夠經過如下命令的方式向package.json文件中添加：

$ sudo npm install grunt插件名 --save-dev

實例：用Grunt進行壓縮js代碼

grunt-contrib-uglify是Grunt.js的一個任務模塊，其基於著名的js壓縮工具uglify，進行js壓縮任務。

首先咱們在項目依賴加上grunt-contrib-uglify。首先cd命令進入一個文件夾，而後安裝該插件：

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

在該文件夾根目錄建立package.json文件以下：

{ 
"name": "test", 
"version": "0.1.0",
 "devDependencies": { 
"grunt": "~0.4.1", 
"grunt-contrib-uglify": "~0.2.0" 
    } 
}

或者你也能夠直接在終端輸入npm init命令來安裝。

接着輸入npm install 命令來安裝，你就會在項目根目錄生成一個名爲node_modules的文件夾，裏面包含grunt和你安裝的grunt插件

接着寫gruntfile.js文件，你能夠手工新建一個名爲gruntfile.js的文件，也能夠在終端輸入grunt-init來建立

gruntfile.js的文件源碼以下

module.exports = function(grunt) {
// 給grunt添加些設置
 grunt.initConfig({
     uglify: {
         options: {
             banner: '/*! 版權全部，這裏亂寫 */\n'
         },
         build: { src: 'jquery-1.9.1.js', //要壓縮的源文件，咱們也能夠用*表示通配，好比'src/*.js'
         dest: 'jquery-1.9.1.min.js',//壓縮後輸出的位置，因爲是在根目錄，因此直接起個文件名就行
         }
     }
 });
 // 載入 "uglify" 插件任務
 grunt.loadNpmTasks('grunt-contrib-uglify');//引號內部爲插件名

 //定義默認須要執行的任務
 grunt.registerTask('default', ['uglify']);//uglify就是grunt任務
};

咱們在項目根目錄放入一個名爲jquery-1.9.1.js的文件，接着在終端輸入：

grunt

來執行整個項目文件，grunt則會自動完成任務，這時你就會看到根目錄生成了一個被壓縮過的query-1.9.1.min.js文件

github地址： https://github.com/gruntjs/grunt

broserify 的安裝及使用教程

Browserify 可讓你使用相似於 node 的 require() 的方式來組織瀏覽器端的 Javascript 代碼，經過預編譯讓前端 Javascript 能夠直接使用 Node NPM 安裝的一些庫。在瀏覽器中，調用browserify編譯後的代碼，一樣寫在<script>標籤中。

用 Browserify 的操做，分爲3個步驟。

1. 寫`node`程序或者模塊
2. 用`Browserify` 預編譯成 `bundle.js`
3. 在`HTML`頁面中加載`bundle.js`

安裝方法

mac平臺：$ sudo npm install -g browserify
其餘平臺：$ npm install -g browserify

用法

首先新建一個名爲main.js的文件，粘貼以下代碼：

var unique = require('uniq');

var data = [1, 2, 2, 3, 4, 5, 5, 5, 6];

console.log(unique(data));

而後安裝uniq模塊：

$ sudo npm install uniq
其餘平臺去掉sudo便可

輸出文件：

$ browserify main.js -o bundle.js
或者：
browserify main.js > bundle.js

也可使用node輸出這段程序：

$ node main.js

生成的bundle.js能夠直接插入網頁。

<html>
  <body>
    <script src="bundle.js"></script>
  </body>
</html>

一些經常使用選項：

--require, -r
--outfile, -o 
--entry, -e
--ignore, -i

你也能夠引入相關文件經過以..開頭的字符串，例如，從main.js載入load.js文件，在main.js文件中你能夠這麼作：

var foo = require('./foo.js');
console.log(foo(4));

若是foo.js是一個父目錄，你能夠用../foo.js替換：

var foo = require('../foo.js');
console.log(foo(4));

你可使用module.exports來導出任意值，而不只僅是函數。好比：

module.exports = 1234;

也能夠這樣：

var numbers = [];
for (var i = 0; i < 100; i++) numbers.push(i);

module.exports = numbers;

一些實例

你能夠很容易地建立一個包，它將導出一個require()函數以便於你能夠從其餘script標籤中require()模塊。這裏咱們將用through和duplexer模塊建立一個bundle.js：

$ browserify -r through -r duplexer -r ./my-file.js:my-module > bundle.js

而後在你的網頁裏你能夠這樣作：

<script src="bundle.js"></script>
<script>
  var through = require('through');
  var duplexer = require('duplexer');
  var myModule = require('my-module');
  /* ... */
</script>

module.exports

新建一名爲main.js，黏貼以下代碼：

module.exports = function (n,m) {

    return n*m;

};

在新建一名爲test.js的文件：

var foo = require('./main');

console.log(foo(5,10));

而後終端輸入：node test =>輸出50

你可使用module.exports導出任何你想輸出的類型值。

module.exports至關於exports，但你不能使用exports = function(){}的形式.

api 實例

你也能夠直接地使用使用API：

var browserify = require('browserify');
var b = browserify();
b.add('./browser/main.js');
b.bundle().pipe(process.stdout);

browserify([files] [, opts])會返回一個browserify實例

grunt-browserify

你能夠安裝grunt的browserify插件。

$ sudo npm install grunt-browserify --save-dev

官方github地址： https://github.com/substack/n...

webpack的安裝及使用教程

介紹

WebPack 是一個模塊打包工具，你可使用WebPack管理你的模塊依賴，並編繹輸出模塊們所需的靜態文件。它可以很好地管理、打包Web開發中所用到的HTML、Javascript、CSS以及各類靜態文件（圖片、字體等），讓開發過程更加高效。

爲了將模塊化技術用於瀏覽器，人們造出了一大堆工具好比：RequireJS、Browserify、LABjs、Sea.js、Duo等。同時，因爲Javascript的標準沒有對模塊的規範進行定義，因此偉大的程序員們又定義了一系列不一樣的模塊定義，好比：CommonJS、AMD、CMD、UMD等。

Webpack同時支持同步模式(CommonJS)和異步模式(AMD形式)的模塊

webpack的優點：

require.js的全部功能它都有
編繹過程更快，由於require.js會去處理不須要的文件

安裝方法

咱們在全局環境的安裝方法以下：

$ sudo npm install webpack -g

實例

首先在根目錄建立一個名爲test的項目文件夾，裏面放一個main.js的文件，代碼以下：

document.write("It works.");

再建立一個index.html文件，代碼以下：

<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <script type="text/javascript" src="bundle.js" charset="utf-8"></script>
    </body>
</html>

這裏的bundle.js是用webpack打包編譯後生成的文件。執行編譯以下：

$ webpack ./test/main.js bundle.js

而後就會在終端生成以下代碼：

Hash: 4447402abfcd89f9daba
Version: webpack 1.9.7
Time: 78ms
    Asset     Size  Chunks             Chunk Names
bundle.js  1.44 kB       0  [emitted]  main
   [0] ./test/main.js 28 bytes {0} [built]

這時雙擊打開index.html文件就會看到It works. 字樣

剩下例子看這裏：http://webpack.github.io/docs...

CommonJS

服務器端的 Node.js 遵循 CommonJS規範，該規範的核心思想是容許模塊經過 require 方法來同步

加載所要依賴的其餘模塊，而後經過 exports 或 module.exports 來導出須要暴露的接口。

require("module");

require("../file.js");

exports.doStuff = function() {};

module.exports = someValue;

AMD

Asynchronous Module Definition 規範其實只有一個主要接口 define(id?, dependencies?, factory)，它要在聲明模塊的時候指定全部的依賴 dependencies，而且還要當作形參傳到 factory 中，對於依賴的模塊提早執行，依賴前置。

define("module", ["dep1", "dep2"], function(d1, d2) {
  return someExportedValue;
});
require(["module", "../file"], function(module, file) { /* ... */ });

優勢：

適合在瀏覽器環境中異步加載模塊
能夠並行加載多個模塊

CMD

Common Module Definition 規範和 AMD 很類似，儘可能保持簡單，並與 CommonJS 和 Node.js 的

Modules 規範保持了很大的兼容性。

define(function(require, exports, module) {

  var $ = require('jquery');

  var Spinning = require('./spinning');

  exports.doSomething = ...

  module.exports = ...

})

優勢：

依賴就近，延遲執行
能夠很容易在 Node.js 中運行

對於全局安裝的webpack，直接執行此命令會默認使用當前目錄的webpack.config.js做爲配置文件。

一般咱們會將 Webpack 安裝到項目的依賴中，這樣就可使用項目本地版本的 Webpack。

# 進入項目目錄
# 肯定已經有 package.json，沒有就經過 npm init 建立
# 安裝 webpack 依賴
$ npm install webpack --save-dev//生成以下的代碼
 "devDependencies": {
    "webpack": "^1.12.9"
  }

entry參數

定義了打包後的入口文件，能夠是數組（全部文件打包生成一個filename文件），對象或者字符串

{

    entry: {

        page1: "./page1",

        page2: ["./entry1", "./entry2"]

    },

    output: {

        // Make sure to use [name] or [id] in output.filename

        //  when using multiple entry points

        filename: "[name].bundle.js",

        path: "dist/js/page",

        chunkFilename: "[id].bundle.js"

    }

}

該段代碼最終會生成一個 page1.bundle.js 和 page2.bundle.js，並存放到 ./dist/js/page 文件夾下

output參數是個對象，定義了輸出文件的位置及名字：

path: 打包文件存放的絕對路徑
publicPath: 網站運行時的訪問路徑
filename:打包後的文件名

Webpack 自己只能處理 JavaScript 模塊，若是要處理其餘類型的文件，就須要使用 loader 進行轉換。

不一樣模塊的加載是經過模塊加載器（webpack-loader）來統一管理的。Loader 能夠理解爲是模塊和資源的轉換器，它自己是一個函數，接受源文件做爲參數，返回轉換的結果。

module: {

        //加載器配置

        loaders: [

            //.css 文件使用 style-loader 和 css-loader 來處理

            { test: /\.css$/, loader: 'style-loader!css-loader' },

            //.js 文件使用 jsx-loader 來編譯處理

            { test: /\.js$/, loader: 'jsx-loader?harmony' },

            //.scss 文件使用 style-loader、css-loader 和 sass-loader 來編譯處理

            { test: /\.scss$/, loader: 'style!css!sass?sourceMap'},

            //圖片文件使用 url-loader 來處理，小於8kb的直接轉爲base64

            { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}

        ]

    }

Loader 能夠經過 npm 發佈和安裝。
！用來定義loader的串聯關係，」-loader」是能夠省略不寫的，多個loader之間用「!」鏈接起來，但全部的加載器都須要經過npm來加載。loaders接受查詢參數，能夠用於傳遞配置項給loader

咱們要在頁面中引入一個 CSS 文件 style.css，首頁將 style.css 也當作是一個模塊，而後用 css-loader 來讀取它，再用 style-loader 把它插入到頁面中。

咱們能夠根據模塊類型（擴展名）來自動綁定須要的 loader。

將 entry.js 中的 require("!style!css!./style.css") 修改成 require("./style.css") ，而後執行：

$ webpack entry.js bundle.js --module-bind 'css=style!css'

安裝 loader：

npm install css-loader style-loader

resolve

webpack在構建包的時候會按目錄的進行文件的查找，resolve屬性中的extensions數組中用於配置程序能夠自行補全哪些文件後綴。extensions 第一個是空字符串，對應不須要後綴的狀況.

externals

當咱們想在項目中require一些其餘的類庫或者API，而又不想讓這些類庫的源碼被構建到運行時文件中，

這在實際開發中頗有必要。此時咱們就能夠經過配置externals參數來解決這個問題：

externals: {

     "jquery": "jQuery"

 }

這樣咱們就能夠放心的在項目中使用這些API了：var jQuery = require(「jquery」);

經常使用命令

webpack 最基本的啓動webpack命令

webpack -w 提供watch方法，實時進行打包更新

webpack -p 對打包後的文件進行壓縮

webpack -d 提供SourceMaps，方便調試

webpack --colors 輸出結果帶彩色，好比：會用紅色顯示耗時較長的步驟

webpack --profile 輸出性能數據，能夠看到每一步的耗時

webpack --display-modules 默認狀況下 node_modules 下的模塊會被隱藏，加上這個參數能夠顯示這些被隱藏的模塊

Webpack開發服務器須要單獨安裝，一樣是經過npm進行：

npm install -g webpack-dev-server

可使用webpack-dev-server直接啓動，也能夠增長參數來獲取更多的功能，

具體配置能夠參見官方文檔。默認啓動端口8080，經過 localhost:8080

能夠訪問頁面，文件修改後保存時會在頁面頭部看到sever的狀態變化，而且會進行熱替換，實現頁面的自動刷新。

當項目逐漸變大，webpack 的編譯時間會變長，能夠經過參數讓編譯的輸出內容帶有進度和顏色。

$ webpack --progress --colors

Webpack 的配置提供了 resolve 和 resolveLoader 參數來設置模塊解析的處理細節，resolve 用來配置應用層的模塊（要被打包的模塊）解析，resolveLoader 用來配置 loader 模塊的解析。

var webpack = require('webpack');

module.exports = {

    entry: './entry.js',//入口文件

    output:{

        path: __dirname,//輸出目錄

        filename: 'bundle.js'//輸出文件名

    },

    //module 的做用是添加loaders

    module:{

        loaders: [

            {

                test:/\.css$/,//test屬性匹配css文件

                loader: 'style!css'//加載style和css loader

            }

        ]

    },

    //Webpack 自己內置了一些經常使用的插件，還能夠經過 npm 安裝第三方插件。

    plugins:[

        new webpack.BannerPlugin('this file is created by trigkit4')//BannerPlugin 內置插件來實踐插件的配置和運行，這個插件的做用是給輸出的文件頭部添加註釋信息。

    ],

    resolve: { fallback: path.join(__dirname, "node_modules") },

    resolveLoader: { fallback: path.join(__dirname, "node_modules") }

};

Webpack 中涉及路徑配置最好使用絕對路徑。

list of Loader

http://webpack.github.io/docs...

Babel-loader can transform JSX/ES6 file into JS file

npm install babel-loader babel-core babel-preset-es2015 babel-preset-react --save-dev

你能夠在webpack裏require進來css文件，而後經過CSS-loader預處理css文件

webpack-dev-server

webpack-dev-server是一個小型的node.js Express服務器,它使用webpack-dev-middleware中間件來爲經過webpack打包生成的資源文件提供Web服務。它還有一個經過Socket.IO鏈接着webpack-dev-server服務器的小型運行時程序。webpack-dev-server發送關於編譯狀態的消息到客戶端，客戶端根據消息做出響應。

webpack-dev-server有兩種模式支持自動刷新——iframe模式和inline模式。在iframe模式下：頁面是嵌套在一個iframe下的，在代碼發生改動的時候，這個iframe會從新加載；在inline模式下：一個小型的webpack-dev-server客戶端會做爲入口文件打包，這個客戶端會在後端代碼改變的時候刷新頁面。

http://localhost:8080/webpack-dev-server/index.html

使用inline模式：命令行方式
1) 命令行方式比較簡單，只需加入--line選項便可。例如：
webpack-dev-server --inline

插件

webpack+reactjs的使用

webpack.config.js文件：

var webpack = require('webpack');
var uglifyJsPlugin = webpack.optimize.UglifyJsPlugin;
module.exports = {
    entry: './entry.jsx',
    output: {
        filename: 'bundle.js'
    },
    module:{
        loaders:[
            {
            test:/\.js[x]?$/,
            loader: 'babel-loader',
            exclude:/node_modules/,
            query:{
                presets: ['es2015','react']
            }
        },
            {
                test: /\.css$/,
                loader: 'style-loader!css-loader?modules'
            }
        ]
    },
    plugins: [
        new uglifyJsPlugin({
            compress: {
                warnings: false
            }
        })
    ]

};

package.json文件

{
  "name": "reactdemo",
  "version": "1.0.0",
  "description": "reactdemos",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "trigkit4",
  "license": "ISC",
  "dependencies": {
    "babel-preset-react": "^6.3.13",
    "react": "^0.14.5",
    "react-dom": "^0.14.5"
  },
  "devDependencies": {
    "babel-core": "^6.3.26",
    "babel-loader": "^6.2.0",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "webpack": "^1.12.9"
  }
}

index.html文件：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="example"></div>
<script src="bundle.js"></script>
</body>
</html>

entry.jsx文件

const React = require('react');
const ReactDOM = require('react-dom');
var style = require('./app.css');
var Input = React.createClass({
    getInitialState: function () {
        return{
            value: 'hello'
        }
    },
    handleChange: function(event){
        this.setState({
            value: event.target.value
        })
    },
    render: function(){
        var value = this.state.value;
        return(
            <div>
                <input type="text" value={value} onChange={this.handleChange}/>
                <p>{a}</p>
            </div>
        )
    }
});
var a = React.createElement('a',{
    className: 'link',
    href: 'https://www.baidu.com'
},'React');//<a class='link' href='https://www.baidu.com'>React</a>
ReactDOM.render(
    <Input/>,
    document.getElementById('example')
);

app.css文件

html{
    font-size: 10px;
}
p{
    font-size: 1.6rem;
}
input[type=text]{
    color: red;
    font-size: 1.2rem;
}

http://webpack.github.io/docs...

github地址: https://github.com/webpack/we...

bower的安裝及使用教程

介紹

Bower是一個Web開發的包管理軟件。每當你須要好比jquery文件，angular.js等等文件時，你無須滿世界去尋找，你只須要經過bower便可下載使用，bower也能夠用來管理這些包之間的依賴。

功能有些相似於Component。不一樣之處是，Component是圍繞GitHub系統構建的，而Bower既能夠管理基於本地資源的包，也能夠管理基於git系統的包。

安裝方法

$ sudo npm install -g bower

咱們可使用bower安裝各類模塊。

# 模塊的名稱
　　$ bower install jquery
　　# github用戶名/項目名
　　$ bower install jquery/jquery
　　# git代碼倉庫地址
　　$ bower install git://github.com/user/package.git
　　# 模塊網址
　　$ bower install http://example.com/script.js

好比安裝jquery，在終端輸入：$ bower install jquery，就會在根目錄生成bower_components/jquery文件夾

咱們可使用$ bowser update jquery來更新指定模塊名稱，或者bower unintsall jquery，不寫名稱則默認更新/卸載全部模塊。

你也能夠經過$ bower init 來保存你的包到bower.json文件中。bower.json是用來記錄你的項目依賴的