Switch from make to gulp

This commit merges the remote-tracking branch 'shyam/PabloVallejo-gulp'
hannahbradby · Aug 31, 2014 · 4d374a4 · 4d374a4
2 parents 5621f14 + 27f22c6
commit 4d374a4
Show file tree

Hide file tree

Showing 4 changed files with 225 additions and 137 deletions.
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -51,10 +51,10 @@ to prose, only display them in the interface through the `t()` function.
 Then, add the new string to `translations/application.yaml`. The translation system,
 Transifex, will automatically detect the change.
 
-Use `make` to build the translations with the local changes.
-`make translations` can be used to pull the latest translations from Transifex.
+Use `gulp` to build the translations with the local changes.
+`gulp translations` can be used to pull the latest translations from Transifex.
 
-If you run `make translate` you will be warned to include a `transifex.auth` file in the root directory that contains your Transifex user details:
+If you run `gulp translations` you will be warned to include a `transifex.auth` file in the root directory that contains your Transifex user details:
 
   {
       "user": "username",
@@ -72,14 +72,14 @@ All pull requests should be proposed to the [master](https://github.com/prose/pr
 4. `git checkout gh-pages && git pull`
 5. `git merge master`
 6. `npm install`
-7. `make clean && make`
+7. `gulp clean && gulp`
 8. `git add dist/`
 9. `git commit`
 10. `git push`
 
 ## Building / Installing
 
-Prose uses [Browserify](http://browserify.org) with [Make](http://www.gnu.org/software/make/)
+Prose uses [Browserify](http://browserify.org) with [Gulp](http://gulpjs.com/)
 to manage dependencies and build. Development also requires you
 have [node.js](http://nodejs.org) >= v0.8 installed.
 
@@ -89,9 +89,9 @@ have [node.js](http://nodejs.org) >= v0.8 installed.
 ### Install steps
 
 1. `git clone git@github.com:prose/prose.git && cd prose/`
-2. Run `make install`
+2. Run `npm install && mkdir -p dist && gulp`
 3. To run prose with authentication locally, a `oauth.json` file is required in the
-root directory. When you run `make` this file is created automatically.
+root directory. When you run `gulp` this file is created automatically.
 4. `npm install serve -g`
 5. Run `serve` By default, prose will be set up on [http://localhost:3000](http://localhost:3000).
 
@@ -109,15 +109,14 @@ param represents the auth string. You can manually set the URL back to your pros
     http://localhost:3000/?code=36f237f41bd81c1a3661
 
 Alternatively you can setup your own Gatekeeper instance. For any changes you make
-to the codebase, you'll need to run `make` to package code into a minified `prose.min.js`
+to the codebase, you'll need to run `gulp` to package code into a minified `prose.min.js`
 and see changes.
 
-__ProTip:__ You may want to install `watch` so you can run `watch make` without
-needing to execute `make` on every change.
+__ProTip:__ You may want to run `gulp watch` to allow the running of gulp on every change.
 
 ## Testing
 
-Running `make` will also build the browser tests available at http://localhost:8000/test
+Running `gulp` will also build the browser tests available at http://localhost:8000/test
 
 You can run tests quickly from the command line with `npm test`
 

diff --git a/Makefile b/Makefile
diff --git a/gulpfile.js b/gulpfile.js
@@ -0,0 +1,199 @@
+// Build file.
+// Usage:
+//
+//    $ gulp
+//
+// See: https://github.com/prose/prose/issues/702
+
+// Require dependencies.
+var gulp = require('gulp');
+var concat = require('gulp-concat');
+var uglify = require('gulp-uglify');
+var shell = require('gulp-shell');
+var browserify = require('browserify');
+var rename = require('gulp-rename');
+var rimraf = require('gulp-rimraf');
+var watch = require('gulp-watch');
+var browserify = require('browserify');
+var source = require('vinyl-source-stream');
+var nodeJS = process.execPath;
+
+// Scripts paths.
+var paths = {
+  vendorScripts: [
+    'vendor/codemirror/codemirror.js',
+    'vendor/codemirror/overlay.js',
+    'vendor/codemirror/htmlmixed.js',
+    'vendor/codemirror/clike.js',
+    'vendor/codemirror/yaml.js',
+    'vendor/codemirror/ruby.js',
+    'vendor/codemirror/markdown.js',
+    'vendor/codemirror/xml.js',
+    'vendor/codemirror/javascript.js',
+    'vendor/codemirror/css.js',
+    'vendor/codemirror/gfm.js',
+    'vendor/liquid.js'
+  ],
+  app: [
+    'app/**/**/*.js'
+  ]
+};
+
+
+// Removes `dist` folder.
+gulp.task('clean', function () {
+
+  return gulp.src('dist', {read: false})
+    .pipe(rimraf());
+});
+
+
+// Translations.
+// To run this task we have to have a `transifex.auth`
+// file inside `translations` folder.
+// Example file contents:
+//
+//  {
+//    "user": "",
+//    "pass": ""
+//  }
+//
+// An account can be created at https://www.transifex.com/
+//
+gulp.task('translations', function () {
+  return gulp.src('')
+    .pipe(
+      shell([
+        'mkdir -p dist',
+        nodeJS + ' translations/update_locales',
+        nodeJS + ' build'
+      ])
+    );
+});
+
+
+// Default tasks.
+// ---------------------------
+
+// Build templates.
+gulp.task('templates', function () {
+  return gulp.src('')
+    .pipe(
+      shell([
+        'mkdir -p dist && ' + nodeJS + ' build'
+      ])
+    );
+});
+
+
+// Creates `dist` directory if not created and
+// creates `oauth.json`.
+gulp.task('oauth', function () {
+  return gulp.src('')
+    .pipe(
+      shell([
+        'mkdir -p dist',
+        'curl "https://raw.githubusercontent.com/prose/prose/gh-pages/oauth.json" > oauth.json'
+      ])
+    );
+});
+
+
+// Build tests.
+gulp.task('tests', function() {
+
+  // Browserify index.js
+  browserify('./test/index.js')
+
+    // Pass `debug` option to enable source maps.
+    .bundle({debug: true})
+
+    // Output file.
+    .pipe(source('index.js'))
+
+    // Output folder.
+    .pipe(gulp.dest('./test/lib/'));
+
+
+  // Browserify polyfill-require.js
+  browserify('./test/lib/polyfill-require.js')
+
+    // Pass `debug` option to enable source maps.
+    .bundle({debug: true})
+    .pipe(source('polyfill.js'))
+    .pipe(gulp.dest('./test/lib/'));
+
+});
+
+
+// Concatenate vendor scripts, browserify app scripts and
+// merge them both into `prose.js`.
+gulp.task('scripts', ['templates', 'oauth'], function() {
+
+  // Concatenate vendor scripts.
+  gulp.src(paths.vendorScripts)
+    .pipe(concat('vendor.js'))
+    .pipe(gulp.dest('dist/'));
+
+  // Browserify app scripts.
+  return browserify('./app/boot.js')
+    .bundle({debug: true})
+    .pipe(source('app.js'))
+    .pipe(gulp.dest('./dist/'))
+
+    // Concatenate scripts once browserify finishes.
+    .on('end', function() {
+
+      // Concatenate `vendor` and `app` scripts into `prose.js`.
+      return gulp.src(['dist/vendor.js', 'dist/app.js'])
+        .pipe(concat('prose.js'))
+        .pipe(gulp.dest('dist/'));
+    });
+
+});
+
+
+// Compress `prose.js`.
+gulp.task('uglify', ['scripts'], function() {
+
+  return gulp.src('dist/prose.js')
+    .pipe(rename('prose.min.js'))
+    .pipe(uglify())
+    .pipe(gulp.dest('dist'));
+});
+
+
+// Watch for changes in `app` scripts.
+// Usage:
+//
+//    $ gulp watch
+//
+gulp.task('watch', ['templates'], function() {
+
+  // Watch any `.js` file under `app` folder.
+  return gulp.src(paths.app)
+    .pipe(watch(function() {
+
+      // Browserify `boot.js`
+      return browserify('./app/boot.js')
+        .bundle({debug: true})
+        .pipe(source('app.js'))
+        .pipe(gulp.dest('./dist/'))
+
+        // Concatenate scripts one browserify finishes.
+        .on('end', function() {
+
+          // Concatenate `vendor` and `app` scripts into `prose.js`.
+          return gulp.src(['dist/vendor.js', 'dist/app.js'])
+            .pipe(concat('prose.js'))
+            .pipe(gulp.dest('dist/'));
+        });
+
+    }));
+
+});
+
+
+// Default task which builds the project when we
+// run `gulp` from the command line.
+gulp.task('default', ['tests', 'scripts', 'uglify']);