前端代码

node_modules/bs-recipes/recipes/gulp.browserify/readme.md

@@ -0,0 +1,91 @@
+#Browsersync - Browserify, Babelify + Watchify + Sourcemaps Example
+
+## Installation/Usage:
+
+To try this example, follow these 4 simple steps. 
+
+**Step 1**: Clone this entire repo
+```bash
+$ git clone https://github.com/Browsersync/recipes.git bs-recipes
+```
+
+**Step 2**: Move into the directory containing this example
+```bash
+$ cd bs-recipes/recipes/gulp.browserify
+```
+
+**Step 3**: Install dependencies
+```bash
+$ npm install
+```
+
+**Step 4**: Run the example
+```bash
+$ npm start
+```
+
+### Additional Info:
+
+
+
+This one is a beast. Write your React JSX code, in ES6, compiled by Browserify and auto-reload all devices
+when the compilation is complete.
+
+### Preview of `gulpfile.js`:
+```js
+var gulp        = require('gulp');
+var gutil       = require('gulp-util');
+var source      = require('vinyl-source-stream');
+var babelify    = require('babelify');
+var watchify    = require('watchify');
+var exorcist    = require('exorcist');
+var browserify  = require('browserify');
+var browserSync = require('browser-sync').create();
+
+// Watchify args contains necessary cache options to achieve fast incremental bundles.
+// See watchify readme for details. Adding debug true for source-map generation.
+watchify.args.debug = true;
+// Input file.
+var bundler = watchify(browserify('./app/js/app.js', watchify.args));
+
+// Babel transform
+bundler.transform(babelify.configure({
+    sourceMapRelative: 'app/js'
+}));
+
+// On updates recompile
+bundler.on('update', bundle);
+
+function bundle() {
+
+    gutil.log('Compiling JS...');
+
+    return bundler.bundle()
+        .on('error', function (err) {
+            gutil.log(err.message);
+            browserSync.notify("Browserify Error!");
+            this.emit("end");
+        })
+        .pipe(exorcist('app/js/dist/bundle.js.map'))
+        .pipe(source('bundle.js'))
+        .pipe(gulp.dest('./app/js/dist'))
+        .pipe(browserSync.stream({once: true}));
+}
+
+/**
+ * Gulp task alias
+ */
+gulp.task('bundle', function () {
+    return bundle();
+});
+
+/**
+ * First bundle, then serve from the ./app directory
+ */
+gulp.task('default', ['bundle'], function () {
+    browserSync.init({
+        server: "./app"
+    });
+});
+```
+