sprockets implemented by node.js
JavaScript CSS CoffeeScript
Switch branches/tags
Nothing to show
Clone or download
waka Merge pull request #2 from mmizutani/patch-1
Slightly improve the documentation
Latest commit cb60c09 Dec 16, 2015
Permalink
Failed to load latest commit information.
sample Update README.md Nov 26, 2015
src fix some bugs Nov 24, 2015
test-assets add specs Nov 21, 2015
test many fixed Nov 23, 2015
.babelrc update babel6 Nov 21, 2015
.gitignore remove unused files Nov 21, 2015
.travis.yml add specs Nov 21, 2015
LICENSE update babel6 Nov 21, 2015
README.md Improve the documentation a bit Dec 13, 2015
gulpfile.babel.js update babel6 Nov 21, 2015
package.json verup for fix Nov 24, 2015

README.md

gulp-sprockets Build Status

gulp-sprockets is a NodeJS implementation of Sprockets. It is able to build and precompile assets of Rails apps solely with Node.js, without Rails.
gulp-sprockets interprets Sprockets directives to concatenate asset files.
And you no longer need to hit the command rake assets:precompile.

Provided gulp streams

  • sprockets.css provides things of asset pipeline for CSS/SCSS/Sass.
  • sprockets.js provides things of asset pipeline for JavaScript/CoffeeScript.
  • sprockets.precompile provides things of asset precompiling.

Installation

npm install gulp-sprockets

Usage

gulpfile.babel.js

import gulp from 'gulp';
import gulpLoadPlugins from 'gulp-load-plugins';
import runSequence from 'run-sequence';

const $ = gulpLoadPlugins({ lazy: false });
const assetsPaths = {
  app: "./app/assets",
  javascripts: [],
  stylesheets: [],
  images: []
};
const destPath = "./public/assets";
const release = process.env.NODE_ENV === 'release'

// initialize sprockets!
$.sprockets.declare(assetsPaths, destPath);


/**
 * Sprockets way
 */

gulp.task('build:image', () => {
  return gulp.src([assetsPaths.app + '/images/**/*.png'])
    .pipe($.if(release, $.sprockets.precompile()))
    .pipe(gulp.dest(destPath))
});

gulp.task('build:js', () => {
  return gulp.src([assetsPaths.app + '/javascripts/*.js'])
    .pipe($.sprockets.js())
    .pipe($.if(release, $.sprockets.precompile()))
    .pipe(gulp.dest(destPath))
});

gulp.task('build:css', () => {
  return gulp.src([assetsPaths.app + '/stylesheets/*.css'])
    .pipe($.cached('css'))
    .pipe($.sprockets.css({precompile: release}))
    .pipe($.if(release, $.sprockets.precompile()))
    .pipe(gulp.dest(destPath))
});

gulp.task('default', () => {
  // the task of building image must be processed before others
  runSequence('build:image', ['build:css', 'build:js']);
})

package.json

{
  "scripts": {
    "build": "gulp"
  },
  ...
}

And then do build command.

$ npm run build