前端模塊化開發篇之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:

 1 var React = require('react');
 2 var ReactDOM = require('react-dom');
 3 
 4 var LinkButton = React.createClass({
 5     getInitialState: function() {
 6         return {
 7             liked: false
 8         };
 9     },
10     handleClick: function(event) {
11         this.setState({
12             liked: !this.state.liked
13         });
14     },
15     render: function() {
16         var text = this.state.liked ? 'like' : 'haven\'t liked';
17         return(
18             <p onClick={this.handleClick}>
19                 You{text} this. Click to toggle.
20             </p>
21         );
22     }
23 });
24 
25 ReactDOM.render(<LinkButton/>,document.body);

View Code

　　LikeButton1.css:

1 *{
2     margin: 0px;
3     padding: 0px;
4 }

View Code

　　LikeButton2.css:

1 p{
2     width: 500px;
3     background-color: #000;
4     color: #fff; 
5 }

View Code

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

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

　　Gruntfile.js:

 1 module.exports = function(grunt) {
 2 
 3     grunt.initConfig({
 4         pkg: grunt.file.readJSON('package.json'),
 5         cssmin: {
 6             options: {
 7                 shorthandCompacting: false,
 8                 roundingPrecision: -1
 9             },
10             target: {
11                 files: {
12                     './LikeButton.min.css': [
13                         './LikeButton1.css',
14                         './LikeButton2.css'
15                     ]
16                 }
17             }
18         }
19     });
20 
21     grunt.loadNpmTasks('grunt-contrib-cssmin');
22 
23     grunt.registerTask('default',['cssmin']);
24 }

View Code

　　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:

 1 var webpack = require('webpack');
 2 
 3 module.exports = {
 4     entry: {
 5         LikeButton: './LikeButton.jsx'
 6     },
 7     output: {
 8         path: './',
 9         filename: '[name].js'
10     },
11     module: {
12         loaders: [
13             {
14                 test: /\.jsx$/,
15                 loader: 'jsx-loader'
16             }
17         ]
18     }
19 }

View Code

　　對於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大大提高了開發效率，因此在這裏強力推薦~