Fonts & Setup progress

Author: Emmanouil Konstantinidis

gulpfile.js

@@ -1,31 +1,68 @@
-var gulp = require('gulp');
-var sass = require('gulp-sass');
 var browserify = require('browserify');
 var babelify = require('babelify');
+var gulp = require('gulp');
+var gutil = require('gulp-util');
+var sass = require('gulp-sass');
 var source = require('vinyl-source-stream');
+var watchify = require('watchify');
+
+var options = {
+  browserifyOpts: {
+    entries: ['./src/js/app.js'],
+    debug: true,
+
+    cache: {},
+    packageCache: {},
+    fullPaths: true
+  },
+  jsDest: 'dist/js'
+};
 
-gulp.task('build-js', function () {
-  return browserify({entries: './src/js/app.js', extensions: ['.js'], debug: true})
-		.transform(babelify)
-		.bundle()
-		.pipe(source('app.js'))
-		.pipe(gulp.dest('dist/js'));
+var bundler = browserify(options.browserifyOpts);
+
+gulp.task('build:js', function () {
+  return bundler
+    .transform(babelify)
+    .bundle()
+    .pipe(source('app.js'))
+    .pipe(gulp.dest(options.jsDest));
 });
 
-gulp.task('watch-js', ['build-js'], function () {
-  gulp.watch('./src/js/**/*.js', ['build-js']);
+gulp.task('watch:js', function () {
+  var watcher = bundler
+    .plugin(watchify, {ignoreWatch: ['**/node_modules/**']})
+    .transform(babelify);
+
+  function bundle() {
+    return watcher.bundle()
+      // log errors if they happen
+      .on('error', gutil.log.bind(gutil, 'Browserify Error'))
+      .pipe(source('app.js'))
+      .pipe(gulp.dest(options.jsDest));
+  };
+
+  watcher.on('update', bundle); // on any dep update, runs the bundler
+  watcher.on('log', gutil.log); // output build logs to terminal
 });
 
-gulp.task('build-scss', function () {
+gulp.task('build:scss', function () {
   return gulp.src('./src/scss/app.scss')
     .pipe(sass().on('error', sass.logError))
     .pipe(gulp.dest('./dist/css'));
 });
 
-gulp.task('watch-scss', ['build-scss'], function () {
+gulp.task('watch:scss', function () {
   gulp.watch('./src/scss/app.scss', ['build-scss']);
 });
 
-gulp.task('build', ['build-js', 'build-scss']);
-gulp.task('watch', ['watch-js', 'watch-scss']);
+gulp.task('copy:fonts', function () {
+  return gulp.src([
+    './node_modules/font-awesome/fonts/*.+(eot|svg|ttf|woff|woff2|otf)',
+    './node_modules/octicons/octicons/*.+(ttf|eot|svg|ttf|woff)',
+  ])
+  .pipe(gulp.dest('./dist/fonts'));
+});
+
+gulp.task('build', ['copy:fonts', 'build:js', 'build:scss']);
+gulp.task('watch', ['watch:js', 'watch:scss']);
 gulp.task('default', ['build']);

package.json

@@ -77,7 +77,6 @@
     "babel-cli": "=6.8.0",
     "babel-core": "=6.8.0",
     "babel-eslint": "=6.0.4",
-    "babel-loader": "=6.2.4",
     "babel-preset-es2015": "=6.6.0",
     "babel-preset-react": "=6.5.0",
     "babel-preset-stage-0": "=6.5.0",
@@ -91,6 +90,7 @@
     "eslint-plugin-react": "=5.1.1",
     "gulp": "=3.9.1",
     "gulp-sass": "^2.3.1",
+    "gulp-util": "^3.0.7",
     "istanbul": "=1.0.0-alpha.2",
     "jsdom": "=9.0.0",
     "mocha": "=2.4.5",
@@ -99,6 +99,7 @@
     "sass-lint": "=1.7.0",
     "sinon": "=1.17.4",
     "sinon-chai": "=2.8.0",
-    "vinyl-source-stream": "^1.1.0"
+    "vinyl-source-stream": "^1.1.0",
+    "watchify": "^3.7.0"
   }
 }

src/scss/app.scss

@@ -20,10 +20,10 @@ $error-color: #DB423C;
 
 /* @group Fonts Overrides */
 
-$fa-font-path: "../../node_modules/font-awesome/fonts";
+$fa-font-path: "../fonts";
 @import "node_modules/font-awesome/scss/font-awesome.scss";
 
-$octicons-font-path: "../../node_modules/octicons/octicons";
+$octicons-font-path: "../fonts";
 @import "node_modules/octicons/octicons/octicons.scss";