Setup Gulp, Browserify & SASS

gitify-app · Jun 2, 2016 · 267edf2 · 267edf2
1 parent 01d7ab2
commit 267edf2
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 17 deletions.
diff --git a/gulpfile.js b/gulpfile.js
@@ -0,0 +1,31 @@
+var gulp = require('gulp');
+var sass = require('gulp-sass');
+var browserify = require('browserify');
+var babelify = require('babelify');
+var source = require('vinyl-source-stream');
+
+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'));
+});
+
+gulp.task('watch-js', ['build-js'], function () {
+  gulp.watch('./src/js/**/*.js', ['build-js']);
+});
+
+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.watch('./src/scss/app.scss', ['build-scss']);
+});
+
+gulp.task('build', ['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",
@@ -82,26 +81,24 @@
     "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",
     "istanbul": "=1.0.0-alpha.2",
     "jsdom": "=9.0.0",
-    "json-loader": "=0.5.4",
     "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-source-stream": "^1.1.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;