angularjs browserify gulp 配置说明 - maggie03230/maggie03230.github.io GitHub Wiki

##优点简述： browserify在模块化方面非常占优，而且在通过一个js文件入口穿针引线后即可合成全部库与需要的js，以及directive等用到的html，生成一个bundle.js，在前端加载时只需要一个文件就够了~页面切换也用前端路由，无需向后端发请求，非常方便快捷，代码组织清晰。

##本文说明项目源码就由于是公司项目无法公开，主要参照下方“项目链接”里的项目配的。关于angular的部分“文档链接”里蛮全，参照“项目链接”里的app文件夹建就好，不说了，有些gulp和browserify配置的要点和改动我在这里整理一下。
##参照：
项目链接：
https://github.com/goodbomb/angular-gulp-browserify-starter

文档链接：
http://mindthecode.com/lets-build-an-angularjs-app-with-browserify-and-gulp/

##配置要点 1.package.json:

  ……
  "devDependencies": {
    "apn": "~1.7.5",
    "browserify-shim": "~3.8.12",
    "gulp": "~3.8.10",
    "gulp-browserify": "~0.5.1",
    "gulp-changed": "~1.3.0",
    "gulp-concat": "~2.6.0",
    "gulp-jade": "~1.1.0",
    "gulp-nodemon": "~1.0.4",
    "gulp-rename": "~1.2.2",
    "gulp-sourcemaps": "^1.6.0",
    "gulp-stylus": "~2.2.0",
    "gulp-uglify": "~1.5.1",
    "gulp-watch": "~4.3.5",
    "partialify": "~3.1.5",
    "debowerify": "~1.3.1"
  },
  "browserify": {
    "transform": [
      "browserify-shim",
      "partialify",
      "debowerify"
    ]
  },
  "browser": {
    "angular": "./bower_components/angular/angular.js",
    "angular-ui-router": "./bower_components/angular-ui-router/release/angular-ui-router.js"
  },
  "browserify-shim": {
    "angular": "angular"
  },
  ……

那些transform的东西一定要加！！！否则在前端里写require('***.html')会出错的说。那些browser和browserify-shim的东西也一定要加……当时没仔细看package.json 用gulp生成不出bundle.js卡了很久。。。

2.gulpfile.js

var browserify = require('gulp-browserify');
gulp.task('bundle-dev', function() {
  gulp.src(['xxx/xxx/main.js']) //xxx为自己放哪儿的目录
  .pipe(browserify({
    insertGlobals: true,
    debug: false
  }))
  // Bundle to a single file
  .pipe(concat('bundle.js'))
  // Output it to our dist folder
  .pipe(gulp.dest('./public/js'));
})

在“项目链接”里，没有用到gulp-browserify，而是自己写了一个gulp的插件，效果不好，如果配置有错task只start，不finish，而且不报错。如果是用的gulp-browserify，gulpfile代码量少且如果发生错误会有报错。

若是新建项目，而不是修改原有项目，完全可以直接把starter搬下来，直接改，而不是像我一样一个文件一个文件往项目里加……这个项目的代码组织真是极好的。

3.jade生成html
jade写起来简介，但是前端生成html就会变慢，故直接放在后端生成。故为了自动生成简便，我并未放在每个package包里。而是单独拎了个文件夹出来，方便生成。当js需要引用时，就指向外面的文件夹，于是我的文件夹目录是这样的：……擦不能放图……

app
|-scripts
| |-main.js
| |-common
| | |-common.js
| | |-directives
| | |- ……
| |-packages
| | |- users
| | |- otherpackages
| | |- index.js
| |-stylus
| |-views
| | |- xx.jade

4.index.jade

doctype html
html(ng-app="xxx") //-这个看自己在main.js里命名是啥
  head
    base(href="/") //-这个如果用ui-router的话一定要加啊……
    meta(charset="UTF-8")
  body(ng-controller="MainCtrl") //这个也是必须的
    block content
    //- script(src="/js/vendor.min.js") //鉴于库里的文件在bundle.js里都有so。。。注释了。
    script(src="/js/bundle.js")  //生成出来的那个bundle
    block footExt