使用npm+gulp+browserify网页前端开发

本文的目的在于使用npm进行js类库依赖管理,同时精简html中繁杂的`<script>`导入。

目前类库加载器(如requirejs/seajs等)可以解决script加载的问题。但对依赖处理不好,还需要开发者一个一个去下载js库,根据个人喜好把js堆砌在项目中。

nodejs中的npm等工具可以很好的处理依赖,但它是为nodejs服务的,它的模块打包格式是CMD,而requirejs是AMD。seajs官方倒是推荐了spm,据说该项目已经终止维护了。

在一定程度上,nodejs的bower插件可以维护AMD类库的依赖,但和requirejs合并共处,我一直没搞明白。

抽时间梳理了一下npm+gulp+browserify的组合,感觉还不错。npm来管理CMD类库的依赖,browserify来进行CMD到AMD的转换,gulp来管理browserify进行自动构建。

构建前是多个js,构建后会把编写的代码js和依赖的类库打包为一个js文件。这样,html中只需要导入一个js文件就可以了。

注:这里没有类加载器的事。

准备环境
---

从一个裸centos开始。

```
[vagrant@bogon ~]$ cat /etc/redhat-release
CentOS release 6.7 (Final)
[vagrant@bogon ~]$ which node
/usr/bin/which: no node in (/usr/local/bin:/bin:/usr/bin:/usr/local/sbin:/usr/sbin:/sbin:/home/vagrant/bin)
```

### 安装nodejs

不要使用yum装nodejs,epel中的版本太低,而其他仓库的拉取速度太慢。

```
[vagrant@bogon myweb]$ npm -v
1.3.6
[vagrant@bogon myweb]$ node -v
v0.10.46
```

目前npm已经4.1.1了, 而nodejs版本都已经6.9.2 LTS/7.3.0 latest了。

推荐使用淘宝镜像站的安装包。

```
#需要root
# sudo -i
# yum install -y perl
# cd /opt
# wget https://npm.taobao.org/mirrors/node/v6.9.2/node-v6.9.2.tar.gz

# tar xvfz node-v6.9.2.tar.gz
# ln /opt/node-v6.9.2-linux-x64/bin/node /usr/bin/node
# cd /opt/node-v6.9.2-linux-x64/lib/node_modules/npm
# make && make install
```

### 使用淘宝cnpm加速npm

```
npm install -g cnpm --registry=https://registry.npm.taobao.org
```

到现在为止,你完全可以用cnpm代替npm,当然如果你的npm速度够快也可以不用考虑。

### 安装全局插件

gulp建议安装到全局,这样可以通过命令行`gulp`运行。如果安装到项目,就需要使用路径访问,如:`node ./node_modules/gulp/bin/gulp.js`

```
$ sudo cnpm install -g gulp
$ sudo gulp -v
[08:05:11] CLI version 3.9.1
[08:05:11] Local version 3.9.1
```

我用虚拟机测试,在宿主机器上访问方便,安装一下`http-server`。

```
$ sudo cnpm install -g http-server
```

前端开发
---

### 创建项目

```
$ mkdir ~/myweb
$ cd ~/myweb
$ cnpm init
```

一路回车,缺省就可以了。实际开发中输入自己的项目信息。

### 安装js依赖

jquery很常用,就以它为例。

```
$ npm install jquery@1.12.4
```

这时候文件就在项目目录的node_modules中了。目前目录结构如下:

```
$ tree node_modules -L 2
node_modules
└── jquery
    ├── AUTHORS.txt
    ├── bower.json
    ├── dist
    ├── external
    ├── LICENSE.txt
    ├── package.json
    ├── README.md
    └── src
```

这时候在`node_modules/jquery/dist`已经有`jquery.min.js`了。

在项目目录创建`index.html`测试一下:

```
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="https://my.oschina.net/polly/blog/node_modules/jquery/dist/jquery.min.js" charset="utf-8"></script>
</head>
<body>
<div id="div1">
  123
</div>
<button id="edit">修改</button>
<script type="text/Javascript">
  $(function(){
    $("#edit").on("click",function(){
      $("#div1").text("abc");
    });
  });
</script>
</body>
</html>
```

启动`http-server`:

```
[vagrant@bogon myweb]$ http-server
Starting up http-server, serving ./
Available on:
  http://127.0.0.1:8080
  http://10.0.2.15:8080
  http://192.168.33.11:8080
```

它自动以当前目录为webroot启动一个简单的web服务。

访问网址测试正常与否:`http://192.168.33.11:8080/index.html`

这样可以了吗?这不是本文的目的,如果需要使用多个js类库,还是有很多的`<script src="https://my.oschina.net/polly/blog/balaba.js"/>`。

### 安装browserify

如果单独使用browserify,应该安装在全局。

```
$ sudo cnpm install -g browserify
```

### 项目结构调整

构建过程中,源码在src中,构建后会保存到dist中,html实际引入的是dist的。考虑代码保护,我们可能还要对js等资源混淆,所以不应该把src目录暴漏在webroot中。

本例项目结构采用maven工程格式,考虑约定俗成的习惯,构建结果保存到$webroot/js中:

```
[vagrant@bogon myweb]$ tree src
src
└── main
    ├── nodejs
    └── webapp
        └── js
```

### 编写示例

src/main/webapp/index.html

仍然使用之前的例子,将`123`改为`abc`,现在把代码单独从`js/index.js`中引入。

```
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="https://my.oschina.net/polly/blog/js/index.js" charset="utf-8"></script>
</head>
<body>
<div class="container" id="div1">
  123
</div>
<button id="edit">修改</button>

</body>
</html>
```

src/main/nodejs/index.js

注意: 此`index.js`非彼`index.js`。

```js
var $ = require("jquery");
$(function(){
  $("#edit").on("click",function(){
    $("#div1").text("abc");
  });
});
```

有疑问了,`jquery`在哪里?管他呢,`browserify`知道就行了。


### browserify转换

```
browserify src/main/nodejs/index.js -o src/main/webapp/js/index.js
```

### 测试

```
cd src/main/webapp
http-server
```

注意,项目结构变了,执行`http-server`要进入webroot目录。

gulp自动构建
---

每一次编辑js都手动调用browserify不现实,我们可以使用gulp进行自动构建。

### 创建gulpfile.js

```
var gulp = require("gulp");
var watch = require("gulp-watch");
var browserify = require("browserify");
var sourcemaps = require("gulp-sourcemaps");
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');

gulp.task("browserify", function () {
 var b = browserify({
  entries: "./src/main/nodejs/index.js",
  debug: true
 });

 return b.bundle()
  .pipe(source("index.js"))
  .pipe(buffer())
  .pipe(sourcemaps.init({loadMaps: true}))
  .pipe(sourcemaps.write("."))
  .pipe(gulp.dest("./src/main/webapp/js"));
});

gulp.task("watch",function(){
  gulp.watch("./src/main/nodejs/index.js",["browserify"]);
});
```

### 安装gulp的插件

```
cnpm install browserify
cnpm install gulp
cnpm install gulp-watch
cnpm install gulp-sourcemaps
cnpm install vinyl-source-stream
cnpm install vinyl-buffer
cnpm install debug-fabulous
cnpm install debug
cnpm install css
```

### 测试gulp任务

```
gulp browserify
```

### 启动gulp监听进程

gulp会监听"./src/main/nodejs/index.js"的变化,然后指定"browserify"任务。

```
$ sudo gulp watch
[09:37:00] Using gulpfile /home/vagrant/myweb/gulpfile.js
[09:37:00] Starting 'watch'...
[09:37:00] Finished 'watch' after 8.91 ms
```

这时候可以回到eclipse编辑代码,一旦修改了"./src/main/nodejs/index.js"就会自动构建,刷新页面就看到效果了。

```
[vagrant@bogon myweb]$ sudo gulp watch
[09:37:00] Using gulpfile /home/vagrant/myweb/gulpfile.js
[09:37:00] Starting 'watch'...
[09:37:00] Finished 'watch' after 8.91 ms
[09:38:34] Starting 'browserify'...
[09:38:35] Finished 'browserify' after 740 ms
```

gulp监听到`09:38:34`文件被编辑了,即刻构建。

### gulp绑定多个文件

如果构建的js很多,gulp文件会很大。

增加插件:

```
cnpm install gulp-rename
cnpm install event-stream
```

修改gulpfile.js

```
var gulp = require('gulp');
var source = require('vinyl-source-stream');
var rename = require('gulp-rename');
var browserify = require('browserify');
var es = require('event-stream');

gulp.task('browserify', function(){
    //定义多个入口文件
    var entityFiles = [
        './src/main/nodejs/index.js',
        './src/main/nodejs/a.js',
    ];

    //遍历映射这些入口文件
    var tasks = entityFiles.map(function(entity){
        return browserify({entries: [entry]})
            .bundle()
            .pipe(source(entry))
            .pipe(rename({
                extname: '.bundle.js',
                dirname: ''
            }))
            .pipe(gulp.dest('./src/main/webapp/js'));
    });

    //创建一个合并流
    return es.merge.apply(null, tasks);
});

gulp.task("watch",function(){
  gulp.watch("./src/main/nodejs/*.js",["browserify"]);
});
```

文件名会修改为index.bundle.js,可以写多个文件。

### 绑定任意多个文件

增加插件:

```
cnpm install glob
```

修改gulp

```
var gulp = require('gulp');
var source = require('vinyl-source-stream');
var rename = require('gulp-rename');
var browserify = require('browserify');
var es = require('event-stream');
var glob = require('glob');

gulp.task('browserify', function(done){
    glob('./src/main/nodejs/*.js', function(err, files) {
        if(err) done(err);

        var tasks = files.map(function(entry) {
            return browserify({ entries: [entry] })
                .bundle()
                .pipe(source(entry))
                .pipe(rename({
                    extname: '.bundle.js',
                    dirname: ''
                }))
                .pipe(gulp.dest('./src/main/webapp/js'));
            });
        es.merge(tasks).on('end', done);
    })
});

gulp.task("watch",function(){
  gulp.watch("./src/main/nodejs/*.js",["browserify"]);
});
```

完美~

Final
---

gulp很强大,插件太多,这里只是冰山一角,以后有时间梳理一下gulp。

写到这里发现sudo执行gulp时生成的文件有权限问题,先mark以后再调整吧。
赞 (0) 评论 分享 ()