前端模塊化開發篇之grunt&webpack篇

　　幾個月前寫了一篇有關gulp和browserify來做前端構建的博客，因為browserify用來做js的打包時可能有些麻煩(特別是在寫React的時候)，所以這里再強烈推薦一款js打包工具-webpack。webpack很強大，不光可以模塊化加載js,甚至還有jsx,css,圖片等等。可以看看webpack托管到github的官網，相信你看一眼就能懂webpack的強大之處了。進入webpack官網>>

　　= =說到此處，不免有些尷尬，由於博主的英文so 一般，對webpack的認識還不夠深，這里僅僅只做一個大概的講解。同樣的，我也沒有在webpack社區中找到有關css壓縮的插件，所以只能用grunt來做有關css的打包，但grunt與webpack並不沖突而且grunt的社區非常成熟，只要是你能想到的插件在grunt官方都是有滴(並不代表我都用過~）。

　　好，進入正題。因為我們用到webpack,所以我們還是用react框架來配合這次演示，當然我們css是用grunt來進行合並壓縮的。在編寫代碼前，我們需要安裝npm,grunt以及webpack。這里我就不再多說了，大家可以移步到npm的官網，上面可以找到具體的安裝細節。npm社區>>

　　第一步先建立一個工作目錄，2016-3-5。然后我們使用npm init (或者 cnpm init)進行項目的初始化。

　   

　　第二步就可以開始編寫js和css文件了。由於我們用的是React框架，因此我們采用jsx語法來書寫，文件當然也得保存為.jsx的格式，我們直接引用facebook官方給出的一個小demo(好吧，其實是博主懶得自己寫了...)，保存為LikeButton.jsx，然后再編寫兩個css文件，用來模擬合並和壓縮，分別保存為LikeButton1.css和LikeButton2.css。代碼如下:

　　LikeButton.jsx:

var React = require('react');
var ReactDOM = require('react-dom');

var LinkButton = React.createClass({
    getInitialState: function() {
        return {
            liked: false
        };
    },
    handleClick: function(event) {
        this.setState({
            liked: !this.state.liked
        });
    },
    render: function() {
        var text = this.state.liked ? 'like' : 'haven\'t liked';
        return(
            <p onClick={this.handleClick}>
                You{text} this. Click to toggle.
            </p>
        );
    }
});

ReactDOM.render(<LinkButton/>,document.body);

　　LikeButton1.css:

*{
    margin: 0px;
    padding: 0px;
}

　　LikeButton2.css:

p{
    width: 500px;
    background-color: #000;
    color: #fff; 
}

　　哈哈，為了演示grunt，我也蠻拼的寫了兩個這么簡短的css。接下來我們開始配置grunt和webpack的任務。

　　grunt的任務需要在根目錄下編寫一個名叫Gruntfile.js的文件，而webpack則需要在根目錄下編寫一個名叫webpack.config.js的文件。先列出代碼，再來進行詳細講解。

　　Gruntfile.js:

module.exports = function(grunt) {

    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        cssmin: {
            options: {
                shorthandCompacting: false,
                roundingPrecision: -1
            },
            target: {
                files: {
                    './LikeButton.min.css': [
                        './LikeButton1.css',
                        './LikeButton2.css'
                    ]
                }
            }
        }
    });

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

    grunt.registerTask('default',['cssmin']);
}

　　grunt的配置分三步，第一步是配置任務，即grunt.initConfig({});第二步是加載任務插件;第三步注冊可執行的任務命令。

　　一般第一步是需要自己手動配置的，grunt有很多很多的插件，而今天介紹的css壓縮合並只用到了grunt-contrib-cssmin的插件。首先看到pkg:grunt.file.readJSON('package.json')這行，有時候我們需要將一些grunt任務基本信息放在package.json中，就需要將這個文件轉換為一個js對象，然后可以用來在這個文件中進行調用。接下來就是一個key: value的形式會一直出現，代表任務名:任務的進本信息。比方說這個cssmin就是grunt的任務名，等會我要壓縮合並文件時就只需在控制台輸入grunt cssmin。

　　任務內部應該怎么寫？這個由於插件的大不相同可能寫法也不同，推薦大家去github或者是npm社區去看官方文檔的寫法。grunt-contrib-cssmin官方文檔>>。

　　第二步的加載插件，只需要grunt.loadNpmTasks('插件名')即可，記得要npm 這個插件哦。

　　第三步的任務注冊，grunt.registerTask('default',['cssmin'])。數組寫上所有你在第一步構建的方法，而default則可以把所有的方法一鍵完成，在命令行只需輸入grunt，則所有任務自行執行完畢。

　　

　　接下來看看我們的文件LikeButton.min.css:

　　

 

　　我們的Grunt出色的完成它的任務~哈哈，雖然只是兩個文件，但是當你面對n個文件時，並且進行性能提升，Grunt會成為你很好的幫手。而React的出現，又使Webpack這款工具徹徹底底的火了！

　　我來說說我為什么要使用webpack把，之前我是使用gulp+browserify來進行構建React的，可是我覺得真的好難配置，特別是前端到了越來越注重模塊化開發的時代，什么圖片，css都要這樣，所以webpack便成為最好的選擇。廢話不多說，直接進入webpack.config.js的配置！

　　webpack.config.js:

var webpack = require('webpack');

module.exports = {
    entry: {
        LikeButton: './LikeButton.jsx'
    },
    output: {
        path: './',
        filename: '[name].js'
    },
    module: {
        loaders: [
            {
                test: /\.jsx$/,
                loader: 'jsx-loader'
            }
        ]
    }
}

　　對於webpack的配置，其實更通俗易懂。entry，作為入口點，用key-value的格式標明了在webpack任務中這個文件的一個引用。后面的output對象，需要指明路徑path以及輸出文件名filename,其中的[name]就是entry中的key。而module中的Loaders數組就是我們用到的webpack插件，這里是一個jsx轉換器"jsx-loader",我們用正則找到所有jsx結尾的文件來進行轉換。

　　整個webpack的配置很簡單，但是webpack功能不止如此，博主也在學習中，可以參考webpack在github上的文檔>>.

　　

　　執行完webpack后控制台會有一些信息的輸出，這個時候你的jsx文件已經打包為js文件了，不過...這個文件確實是有點大，因為里面包含了整個react的框架，但是當多個jsx或者js打包時我們可以創建一個common的js來提取公共部分。

　　webpack和grunt大大提升了開發效率，所以在這里強力推薦~