备案控制台
探索云世界
开发者社区 开发与运维 文章 正文

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

2016-12-27 1512
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 本文的目的在于使用npm进行js类库依赖管理，同时精简html中繁杂的导入。目前类库加载器(如requirejs/seajs等)可以解决script加载的问题。

本文的目的在于使用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="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="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="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。

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以后再调整吧。

文章标签：
JavaScript
测试技术
索引
Web App开发
前端开发
关键词：
前端网页
npm网页
前端npm
网页前端
npm前端开发
pollyduan
目录
相关文章
小万哥丶
|
1月前
|
XML 前端开发 JavaScript
AJAX 前端开发利器：实现网页动态更新的核心技术
**AJAX** 允许网页在不刷新的情况下更新内容，实现异步与服务器交换数据。通过JavaScript的XMLHttpRequest对象，可发送和接收数据。当用户触发事件（如点击），函数向服务器发送GET请求，服务器响应后更新指定HTML部分。AJAX并非编程语言，而是利用浏览器内置对象、JavaScript和DOM技术。核心是XMLHttpRequest对象，它有多种方法（如`open()`和`send()`）和属性（如`onreadystatechange`、`readyState`和`status`）来处理请求和响应。
小万哥丶
57 2
AJAX 前端开发利器：实现网页动态更新的核心技术
阑梦清川
|
1月前
|
前端开发
web前端---------网页中的选项
web前端---------网页中的选项
阑梦清川
21 0
阑梦清川
|
1月前
|
前端开发 数据安全/隐私保护
web前端----------网页中的输入框
web前端----------网页中的输入框
阑梦清川
22 0
阑梦清川
|
1月前
|
前端开发
Web前端开发------网页分组元素
Web前端开发------网页分组元素
阑梦清川
23 0
mrq4nk6ni2neg
|
2月前
|
缓存 前端开发 开发者
前端性能优化：提升网页加载速度的最佳实践
【2月更文挑战第8天】 在当今互联网时代，网页的加载速度直接影响着用户体验和网站的流量。本文将介绍前端性能优化的最佳实践，包括减少HTTP请求、压缩资源、使用CDN加速、懒加载等技术手段，帮助开发者提升网页加载速度，提升用户体验。
mrq4nk6ni2neg
61 6
叫个什么名字
|
13天前
|
缓存 前端开发 JavaScript
如何优化前端网页加载速度：7个实用技巧
在当今互联网时代，网页加载速度对用户体验至关重要。本文将介绍7个实用的技巧，帮助前端开发者优化网页加载速度，提升用户体验。从压缩资源到异步加载，从图片优化到缓存策略，这些技巧将帮助你在前端开发中取得更好的效果。
叫个什么名字
10 1
叫个什么名字
|
21天前
|
前端开发 JavaScript UED
如何优化前端网页性能提升用户体验
本文将探讨如何通过一系列前端优化技术，提高网页加载速度、减少资源请求次数，从而优化用户体验。我们将介绍一些常用的性能优化技巧，包括资源压缩、懒加载、CDN 加速等方法，帮助开发者更好地构建高效、流畅的前端网页。
叫个什么名字
12 3
游客762btuqu5wybw666
|
1月前
|
Web App开发 前端开发 JavaScript
前端技术探索与应用：构建高性能响应式网页
本文将介绍前端技术的最新发展和应用，重点探讨如何构建高性能响应式网页。通过深入解析前端框架、优化技巧以及调试工具等方面的内容，帮助读者提升网页的交互体验和加载速度，实现用户友好的界面设计。
游客762btuqu5wybw666
30 4
请看我回答~
|
1月前
|
缓存 前端开发 JavaScript
前端性能优化：提升网页加载速度的关键技巧
【2月更文挑战第11天】 在当今互联网高速发展的时代，网页加载速度成为影响用户体验和网站成功的重要因素。本文将深入探讨前端性能优化的关键技巧，包括资源压缩、图片优化、HTTP缓存、代码精简等方面，为前端开发者提供实用的指导和建议。
请看我回答~
30 6
shuj
|
2月前
|
前端开发 JavaScript 搜索推荐
前端性能优化：提升网页加载速度的关键技巧
【2月更文挑战第9天】 在当今互联网时代，网页加载速度直接关系到用户体验和网站流量。本文将介绍前端性能优化的关键技巧，包括图片优化、代码压缩、资源合并等方法，帮助开发者提升网页加载速度，提升用户满意度。
shuj
18 2

热门文章

最新文章

  • 1
    npm，registry，镜像源，npm切换源，yarn，cnpm，taobao，nrs
  • 2
    【node】 npm install 报错：code 128
  • 3
    【热门话题】深入浅出：npm常用命令详解与实践
  • 4
    npm 常用指令
  • 5
    npm install安装时一直idealTree:npm: sill idealTree buildDeps解决方案（亲测有效）
  • 6
    message: 没有找到可以构建的 NPM 包,请确认需要参与构建的 npm 都在 `miniprogra
  • 7
    构建高效响应式Web界面：现代前端框架的比较
  • 8
    npm install 报 npm ERR! cb()never called!的错误
  • 9
    Nginx配置详解Docker部署Nginx使用Nginx部署vue前端项目
  • 10
    前端开发中的跨域问题及解决方案
  • 1
    前端如何做性能优化？
    10
  • 2
    前端安全：Vue应用中防范XSS和CSRF攻击
    7
  • 3
    探索前端框架React Hooks的优势与应用
    9
  • 4
    前端发展史
    11
  • 5
    开发指南017- 移动前端结构
    8
  • 6
    开发指南011-前端PC版结构
    11
  • 7
    报错场景：ant design vue前端登录时，输入的验证码是对的，但是一直提上验证码错误，登录不进去 报错信息（Error in execution； nested exception）
    18
  • 8
    优化前端性能的六大技巧
    14
  • 9
    IndexedDB的异步操作特性对于前端开发者来说有什么挑战和注意事项吗？
    10
  • 10
    前端如何利用indexDB进行数据优化
    10

    • 相关课程

    更多
  • 网站性能前端监控课程
  • 移动Web前端开发
  • Ajax 前端开发入门与实战
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础
  • 前端开发框架Bootstrap使用教程

    • 相关电子书

    更多
  • 基于webpack和npm的前端组件化实践
  • 基于FAAS构建NPM同步CDN
  • Vue.js在前端服务化上的实践与探索

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • 前端开发基础6：Node.js和LESS预编译工具
  • 前端开发基础2：VS Code和Edge的联动开发
  • 前端开发基础1：前端开发环境的安装和配置
  • 搭建Node.js编程环境

    • 推荐镜像

    更多
  • NPM
  • composer
  • pypi
    • 下一篇
    部署LAMP环境（Alibaba Cloud Linux 3）