前端模块化开发篇之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大大提高了开发效率，因此在这里强力推荐~