Merge pull request #192 from ekonstantinidis/gulp-again

ekonstantinidis · ekonstantinidis · commit adde38b77eea · 2016-06-04T21:48:16.000+01:00
Hello Gulp (again)
diff --git a/.travis.yml b/.travis.yml
@@ -10,6 +10,9 @@ cache:
 install:
   - npm install
 
+before_script:
+  - npm run build
+
 script:
   - npm test
 
diff --git a/gulpfile.js b/gulpfile.js
@@ -0,0 +1,72 @@
+var assign = require('lodash.assign');
+var babelify = require('babelify');
+var browserify = require('browserify');
+var buffer = require('vinyl-buffer');
+var gulp = require('gulp');
+var gutil = require('gulp-util');
+var sass = require('gulp-sass');
+var source = require('vinyl-source-stream');
+var uglify = require('gulp-uglify');
+var watchify = require('watchify');
+
+var options = {
+  browserifyOpts: {
+    entries: './src/js/app.js',
+    debug: true
+  },
+  jsDest: 'dist/js'
+};
+
+var bundler = browserify(options.browserifyOpts);
+
+gulp.task('build:js', function () {
+  return bundler
+    .transform(babelify)
+    .bundle()
+    .pipe(source('app.js'))
+    .pipe(buffer())
+    .pipe(uglify())
+    .pipe(gulp.dest(options.jsDest));
+});
+
+gulp.task('watch:js', function () {
+  var watcherOpts = assign({}, watchify.args, options.browserifyOpts);
+  var watcher = watchify(browserify(watcherOpts)).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(buffer())
+      .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
+
+  return bundle();
+});
+
+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', function () {
+  gulp.watch('./src/scss/app.scss', ['build: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']);
diff --git a/index.html b/index.html
@@ -5,13 +5,14 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link href="dist/css/app.css" rel="stylesheet">
   </head>
 
   <body>
       <div id="gitify"></div>
   </body>
 
-  <script src="dist/app.js"></script>
+  <script src="dist/js/app.js"></script>
 
   <script>
     // Disable zoom
diff --git a/package.json b/package.json
@@ -4,12 +4,11 @@
   "description": "GitHub Notifications on your menu bar.",
   "main": "main.js",
   "scripts": {
-    "build": "webpack",
-    "watch": "webpack --progress --colors --watch",
-    "release-js": "webpack --config webpack.rel.config.js",
+    "build": "gulp build",
+    "watch": "gulp watch",
     "package": "electron-packager . Gitify --overwrite --platform=darwin --arch=x64 --version=1.0.2 --asar=true --icon=images/app-icon.icns --prune --ignore='src' --ignore='coverage'",
     "codesign": "bash scripts/codesign.bash",
-    "dist": "npm run release-js && npm run package && npm run codesign",
+    "dist": "npm run build && npm run package && npm run codesign",
     "lint-js": "eslint 'src/js/' 'src/js/app.js' 'main.js'",
     "lint-sass": "sass-lint -c .sass-lint.yml -v -q",
     "mocha": "mocha --opts src/js/__tests__/__helpers__/mocha.opts",
@@ -78,30 +77,32 @@
     "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",
+    "babelify": "=7.3.0",
+    "browserify": "=13.0.1",
     "chai": "=3.5.0",
-    "css-loader": "=0.23.1",
     "electron-packager": "=7.0.1",
     "electron-prebuilt": "=1.0.2",
     "enzyme": "=2.3.0",
     "eslint": "=2.9.0",
     "eslint-plugin-react": "=5.1.1",
-    "file-loader": "=0.8.5",
+    "gulp": "=3.9.1",
+    "gulp-sass": "=2.3.1",
+    "gulp-uglify": "=1.5.3",
+    "gulp-util": "=3.0.7",
     "istanbul": "=1.0.0-alpha.2",
     "jsdom": "=9.0.0",
-    "json-loader": "=0.5.4",
+    "lodash.assign": "=4.0.9",
     "mocha": "=2.4.5",
     "nock": "=8.0.0",
-    "node-sass": "=3.7.0",
     "redux-mock-store": "=1.0.2",
     "sass-lint": "=1.7.0",
-    "sass-loader": "=3.2.0",
     "sinon": "=1.17.4",
     "sinon-chai": "=2.8.0",
-    "style-loader": "=0.13.1",
-    "webpack": "=1.13.0"
+    "vinyl-buffer": "=1.0.0",
+    "vinyl-source-stream": "=1.1.0",
+    "watchify": "=3.7.0"
   }
 }
diff --git a/src/js/app.js b/src/js/app.js
@@ -1,6 +1,3 @@
-// Load Styles
-import '../scss/app.scss';
-
 import React from 'react'; // eslint-disable-line
 import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
diff --git a/src/scss/app.scss b/src/scss/app.scss
@@ -7,8 +7,6 @@
 
 /* @group Colors */
 
-$theme-primary: #3893C6;
-
 $theme-black: #262626;
 $theme-green: #5EBA7D;
 
@@ -22,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";
 
 
diff --git a/webpack.config.js b/webpack.config.js
diff --git a/webpack.rel.config.js b/webpack.rel.config.js
