Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Gulpfile for Rails application with replaced Sprockets with Gulp
'use strict'
var gulp, sass, babelify, browserify, watchify, source, util;
gulp = require('gulp');
sass = require('gulp-sass');
babelify = require('babelify')
browserify = require('browserify');
watchify = require('watchify');
source = require('vinyl-source-stream');
util = require('gulp-util');
var sassPath, sassSource, jsSource;
sassPath = './app/assets/stylesheets/**/*.sass';
sassSource = ['./app/assets/stylesheets/application.sass'];
jsSource = './app/assets/javascripts/app.js';
function compile(watch) {
var bundler = watchify(browserify({entries: jsSource, debug: true}).transform(babelify));
function bundle() {
bundler.bundle()
.on('error', util.log.bind(util, "Browserify Error"))
.pipe(source('build.js'))
.pipe(gulp.dest('./public/assets'))
}
if (watch) {
bundler.on('update', function(){
console.log("Recompiling JS...");
bundle();
});
}
bundle();
}
gulp.task('default', ['compile-sass', 'compile-es6']);
gulp.task('compile-sass', function() {
gulp.src(sassSource)
.pipe(sass({ indentedSyntax: true, errLogToConsole: true }))
.pipe(gulp.dest('public/stylesheets'))
});
gulp.task('compile-es6', function() {
compile();
});
gulp.task('watch', ['watch-sass', 'watch-es6']);
gulp.task('watch-sass', function() {
gulp.watch(sassPath, ['compile-sass']);
});
gulp.task('watch-es6', function() {
compile(true)
});

Hey, just wondering which gems I should use to implement this in my application?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment