gulp_assets 1.0.0.pre.2

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: f4ecce9a646f9dc86c138e0566dfd8333bdf81ec
+  data.tar.gz: 8b5b0bf7f472fe25d1785faa4ad500659c460ecf
+SHA512:
+  metadata.gz: b2d0b2f48f9c90b9c4fa8de0b28eeef337369ac90cec07d2bf9849aa7da5117352474426f47eac60f955a21fc3d09d7fed889c2764903519cc5501ddcc85112b
+  data.tar.gz: e1049218df26d125db961681660fefd2224b3d5bd8a8f38f56556a92b1c8420b34296814c17d1ee10fdc992dbabce4720aeacffac2989ab1fa489fe91d21d836

data/MIT-LICENSE

@@ -0,0 +1,20 @@
+Copyright 2015 Jan Varwig
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,97 @@
+# GulpAssets
+
+Rails Plugin to augment frontend development with a gulp/webpack based
+workflow.
+
+- Installs Javascript infrastructure in your Rails project to manage
+  frontend assets
+- Provides view helpers to Rails that allow you to easily reference
+  gulp generated assets from Rails views
+- Puts Livereload into the Rails middleware stack. This injects the
+  Livereload client into Rails-renderd pages, updates are triggered from
+  gulp.
+
+## Usage
+
+1. Add `gem 'gulp_assets' to your Gemfile and run `bundle install`.
+2. Run `rails generate gulp_assets` to generate all necessary files.
+3. Develop your frontend code in the `frontend` directory
+4. Reference files generated by gulp using the `gulp_asset_path` helper
+5. Run `npm start` during development for livereload/Webpack
+   Hot Module replacement.
+
+## Structure
+
+`frontend/assets` contains static assets (images, fonts, icons). A
+static asset is a file that is not processed and that does not contain
+references to other files. They are simply copied to
+`public/assets/assets`.
+
+`frontend/stylesheets` contains SCSS files which are compiled to
+`public/assets/stylesheets`. Files beginning with underscores are
+ignored.
+
+`frontend/javascripts/main.js` is the entry point for the client-side
+Javascript. This is picked up by Webpack, bundled and copied to
+`public/assets/javascripts`. If you need additional entry points,
+please adjust the webpack configuration accordingly.
+
+## Gulp Commands
+
+### `gulp default`
+
+Runs the webpack development server which will watch files, trigger
+livereload and serve static assets.
+
+This also runs if you execute `npm start`.
+
+### `gulp precompile`
+
+Compiles assets for production, hashes their names and generates a
+`rev-mainfest.json`, which is used by the `gulp_asset_path` helper to
+generate the correct links with the hash in the filename.
+
+## Referencing gulp assets from Rails views
+
+The `gulp_assets_path` helper takes a partial path as a parameter that
+sits inside the `public/assets` folder. It then operates differently,
+depending on the `RAILS_ENV`:
+
+- development: Prepend the path with the correct location on the webpack
+  dev server, usually `//localhost:8080/assets`. `javascripts/main.js`
+  would become `//localhost:8080/assets/javascripts/main.js`.
+- production: Prepend the path with the correct asset path and replace
+  the filename with the hashed version. `javascripts/main.js` would
+  become `/assets/javascripts/main-a42bb48a5f83.js`.
+
+### Shortcuts
+
+To include a gulp-generated javascript or stylesheet, use the `gulp_javascript` or
+`gulp_stylesheet` helper:
+
+    <%= gulp_javascript "main" %>
+    <%= gulp_stylesheet "main" %>
+
+Since "main" is the default name, you can omit it:
+
+    <%= gulp_javascript %>
+    <%= gulp_stylesheet %>
+
+Both accept a second parameter for overwriting attributes. This can be
+used for example to change the `media` attribute for a stylesheet.
+
+## Examples
+
+### CSS
+ 
+ - `frontend/stylesheets/main.scss` Input file
+ - `public/assets/stylesheets/main.css` Output File
+ - `<link rel="stylesheet" media="all" href="<%=gulp_asset_path('stylesheets/main.css')%>"/>` Used to link to the file.
+ - `<%= gulp_stylesheet "main" %>` or `<%= gulp_stylesheet %>` also generate correct links
+
+### JS
+
+ - `frontend/javscripts/main.js` Input file
+ - `public/assets/javscripts/main.js` Output File
+ -  `<script src="<%=gulp_asset_path('javascripts/main.js')%>"></script>`
+ - `<%= gulp_javascript "main" %>` or `<%= gulp_javascript %>` also generate correct links

data/lib/generators/gulp_assets_generator.rb

@@ -0,0 +1,28 @@
+class GulpAssetsGenerator < Rails::Generators::Base
+  desc "Setup up the folder structure for Gulp Assets"
+  source_root File.expand_path('../../../template', __FILE__)
+
+  def create_frontend_folder
+    directory 'frontend'
+    copy_file ".eslintrc"
+  end
+
+  def create_webpack_config
+    copy_file 'webpack.common.config.js'
+    copy_file 'webpack.config.js'
+    copy_file 'webpack.hot.config.js' # TODO replace host dynamically
+  end
+
+  def create_gulpfile
+    copy_file 'gulpfile.js'
+  end
+
+  def create_module
+    template "package.json"
+  end
+
+  def install_dependencies
+    run "npm install"
+  end
+
+end

data/lib/gulp_assets/railtie.rb

@@ -0,0 +1,33 @@
+require 'gulp_assets/view_helpers'
+
+module GulpAssets
+  class Railtie < Rails::Railtie
+    config.gulp_assets = ActiveSupport::OrderedOptions.new
+
+    config.gulp_assets.rev_manifest_path = 'public/assets/rev-manifest.json'
+    config.gulp_assets.rev_manifest = nil
+    config.gulp_assets.dev_host = "//localhost:8080"
+    config.gulp_assets.path = "/assets"
+
+    initializer "gulp_assets.rev_manifest" do
+      if File.exist?(config.gulp_assets.rev_manifest_path)
+        config.gulp_assets.rev_manifest = JSON.parse(File.read(config.gulp_assets.rev_manifest_path))
+      end
+    end
+
+    initializer "gulp_assets.view_helpers" do
+      ActionView::Base.send :include, ViewHelpers
+    end
+
+    initializer "gulp_assets.livereload" do
+      if Rails.env.development?
+        require 'rack-livereload'
+        config.app_middleware.insert_after ActionDispatch::Static, Rack::LiveReload
+      end
+    end
+
+    rake_tasks do
+      load "tasks/gulp_assets_tasks.rake"
+    end
+  end
+end

data/lib/gulp_assets/version.rb

@@ -0,0 +1,3 @@
+module GulpAssets
+  VERSION = "1.0.0.pre.2"
+end

data/lib/gulp_assets/view_helpers.rb

@@ -0,0 +1,32 @@
+module GulpAssets
+  module ViewHelpers
+
+    def gulp_asset_path(path)
+      config = Rails.application.config.gulp_assets
+
+      if Rails.env.development?
+        "#{config.dev_host}#{config.path}/#{path}"
+      else
+        path = config.rev_manifest[path] if config.rev_manifest
+        "#{config.path}/#{path}"
+      end
+    end
+
+    def gulp_javascript(filename="main", attributes={})
+      default_attributes = {
+        src: gulp_asset_path("javascripts/#{filename}.js")
+      }
+      content_tag "script", nil, default_attributes.merge(attributes)
+    end
+
+    def gulp_stylesheet(filename="main", attributes={})
+      default_attributes = {
+        rel: "stylesheet",
+        media: "all",
+        href: gulp_asset_path("stylesheets/#{filename}.css")
+      }
+      tag 'link', default_attributes.merge(attributes)
+    end
+
+  end
+end

data/lib/gulp_assets.rb

@@ -0,0 +1,4 @@
+module GulpAssets
+end
+
+require 'gulp_assets/railtie' if defined?(Rails)

data/lib/tasks/gulp_assets_tasks.rake

@@ -0,0 +1,8 @@
+namespace :gulp_assets do
+  desc "Compile Gulp Assets"
+  task :precompile do
+    sh "gulp precompile"
+  end
+end
+
+Rake::Task['assets:precompile'].enhance ['gulp_assets:precompile']

data/template/.eslintrc

@@ -0,0 +1,22 @@
+{
+  "parser": "babel-eslint",
+  "env": {
+    "es6": true,
+    "node": true,
+    "browser": true
+  },
+  "ecmaFeatures": {
+    "modules": true,
+    "jsx": true
+  },
+  "rules": {
+    "quotes": [1, "single"],
+    "no-return-assign": 0,
+    "no-multi-spaces": 0,
+    "no-use-before-define": 0,
+    "no-underscore-dangle": 0,
+    "no-unused-vars": 0,
+    "no-script-url": 0
+  },
+  "plugins": [ "react" ]
+}

data/template/frontend/javascripts/main.js

@@ -0,0 +1,15 @@
+'use strict';
+
+import $ from 'jquery';
+
+$.ajaxPrefilter(function(options, originalOptions, jqXHR) {
+  var token;
+  if (!options.crossDomain) {
+    token = $('meta[name="csrf-token"]').attr('content');
+    if (token) {
+      return jqXHR.setRequestHeader('X-CSRF-Token', token);
+    }
+  }
+});
+
+$(() => console.log('Hello World'));

data/template/frontend/stylesheets/main.scss

@@ -0,0 +1,3 @@
+/*
+ * Your styles here
+ */

data/template/gulpfile.js

@@ -0,0 +1,110 @@
+var _           = require('lodash');
+var gulp        = require('gulp');
+var sass        = require('gulp-sass');
+var gutil       = require('gulp-util');
+var livereload  = require('gulp-livereload');
+var rev         = require('gulp-rev');
+var revReplace  = require('gulp-rev-replace');
+var stream      = require('webpack-stream');
+var rename      = require('gulp-rename');
+//var debug     = require('gulp-debug');
+var sequence    = require('run-sequence');
+
+var path             = require('path');
+var webpack          = require('webpack');
+var WebpackDevServer = require('webpack-dev-server');
+var webpackConfig    = require('./webpack.common.config');
+var webpackConfigHot = require('./webpack.hot.config');
+
+var BASE             = 'frontend/';
+var ASSET_FILES      = 'frontend/assets/**/*';
+var STYLESHEET_FILES = 'frontend/stylesheets/**/*.scss';
+var OUTPUT_FOLDER    = 'public/assets/';
+
+function replace() {
+  var manifest = gulp.src(OUTPUT_FOLDER + 'rev-manifest.json');
+  return revReplace({manifest: manifest});
+}
+
+gulp.task('assets:development', function(){
+  return gulp.src(ASSET_FILES, {base: BASE})
+    .pipe(gulp.dest(OUTPUT_FOLDER))
+    .pipe(livereload());
+});
+
+gulp.task('assets:production', function(){
+  return gulp.src(ASSET_FILES, {base: BASE})
+    .pipe(gulp.dest(OUTPUT_FOLDER))
+    .pipe(rev())
+    .pipe(gulp.dest(OUTPUT_FOLDER))
+    .pipe(rev.manifest(OUTPUT_FOLDER + 'rev-manifest.json', {
+      merge: true,
+      base: OUTPUT_FOLDER
+    }))
+    .pipe(gulp.dest(OUTPUT_FOLDER));
+});
+
+gulp.task('css:development', function () {
+  return gulp.src(STYLESHEET_FILES, {base: BASE})
+    .pipe(sass()
+       .on('error', sass.logError))
+    .pipe(gulp.dest(OUTPUT_FOLDER))
+    .pipe(livereload());
+});
+
+gulp.task('css:production', function () {
+  return gulp.src(STYLESHEET_FILES, {base: BASE})
+    .pipe(sass()
+       .on('error', sass.logError))
+    .pipe(replace())
+    .pipe(gulp.dest(OUTPUT_FOLDER))
+    .pipe(rev())
+    .pipe(gulp.dest(OUTPUT_FOLDER))
+    .pipe(rev.manifest(OUTPUT_FOLDER + 'rev-manifest.json', {
+      merge: true,
+      base: OUTPUT_FOLDER
+    }))
+    .pipe(gulp.dest(OUTPUT_FOLDER));
+});
+
+gulp.task('javascript:production', function(){
+  return gulp.src('frontend/javascripts/main.js', {base: 'frontend'})
+    .pipe(stream(webpackConfig, webpack))
+    .pipe(rename({dirname: 'javascripts'}))
+    .pipe(gulp.dest(OUTPUT_FOLDER))
+    .pipe(rev())
+    .pipe(gulp.dest(OUTPUT_FOLDER))
+    .pipe(rev.manifest(OUTPUT_FOLDER + 'rev-manifest.json', {
+      merge: true,
+      base: OUTPUT_FOLDER
+    }))
+    .pipe(gulp.dest(OUTPUT_FOLDER));
+});
+
+gulp.task('webpack:server', function(cb){
+  var compiler = webpack(webpackConfigHot);
+  var server   = new WebpackDevServer(compiler, webpackConfigHot.devServer);
+  server.listen(8080, 'localhost', function(){
+    console.info('==> 🚧  Webpack development server listening on localhost:8080');
+  });
+  server.listeningApp.on('close', function(){
+    console.log('closing', arguments);
+    cb();
+  });
+});
+
+gulp.task('default', ['css:development', 'assets:development'], function(cb){
+  gulp.run('webpack:server');
+  livereload.listen();
+  gulp.watch(STYLESHEET_FILES, ['css:development']);
+});
+
+gulp.task('precompile', function(cb){
+  sequence(
+    'assets:production',
+    'css:production',
+    'javascript:production',
+    cb
+  );
+});
+

data/template/package.json.tt

@@ -0,0 +1,30 @@
+{
+  "name": "<%= Rails.application.class.parent_name %>",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "start": "$(npm bin)/gulp"
+  },
+  "dependencies": {
+    "babel-core": "~5.5.8",
+    "babel-loader": "~5.1.4",
+    "gulp": "^3.9.0",
+    "gulp-rev-replace": "^0.4.2",
+    "gulp-livereload": "^3.8.0",
+    "gulp-rename": "^1.2.2",
+    "gulp-rev": "^5.1.0",
+    "gulp-sass": "^2.0.3",
+    "gulp-util": "^3.0.6",
+    "jquery": "~2.1.4",
+    "lodash": "^3.9.3",
+    "node-libs-browser": "~0.5.2",
+    "react": "~0.13.3",
+    "redux": "~0.12.0",
+    "redux-promise-middleware": "0.0.1",
+    "run-sequence": "^1.1.2",
+    "webpack": "~1.9.11",
+    "webpack-dev-server": "^1.10.1",
+    "webpack-stream": "^2.0.0",
+    "react-hot-loader": "^1.2.8"
+  }
+}

data/template/webpack.common.config.js

@@ -0,0 +1,25 @@
+'use strict';
+
+var path = require('path');
+var webpack = require('webpack');
+
+module.exports = {
+  entry: [
+    './frontend/javascripts/main.js'
+  ],
+  output: {
+    path: path.resolve('./public/assets/javascripts'),
+    publicPath: '/assets/javascripts',
+    filename: '[name].js'
+  },
+  module: {
+    loaders: [
+      {
+        test: /\.jsx?$/,
+        exclude: /(node_modules|bower_components)/,
+        loaders: ['babel']
+      }
+    ]
+  }
+};
+

data/template/webpack.config.js

@@ -0,0 +1,3 @@
+'use strict';
+
+module.exports = require('./webpack.hot.config');

data/template/webpack.hot.config.js

@@ -0,0 +1,28 @@
+'use strict';
+
+var path    = require('path');
+var webpack = require('webpack');
+var _       = require('lodash');
+var common  = require('./webpack.common.config');
+
+var hot = _.cloneDeep(common);
+
+hot.entry.unshift(
+  'webpack-dev-server/client?http://localhost:8080',
+  'webpack/hot/only-dev-server'
+);
+hot.output.publicPath = '//localhost:8080/assets/javascripts';
+hot.module.loaders[0].loaders.unshift('react-hot');
+hot.devtool = 'cheap-module-eval-source-map';
+hot.plugins = [
+  new webpack.HotModuleReplacementPlugin()
+];
+
+hot.devServer = {
+  contentBase: './public',
+  publicPath: '/assets/javascripts',
+  hot: true,
+  colors: true
+};
+
+module.exports = hot;

metadata

@@ -0,0 +1,103 @@
+--- !ruby/object:Gem::Specification
+name: gulp_assets
+version: !ruby/object:Gem::Version
+  version: 1.0.0.pre.2
+platform: ruby
+authors:
+- Jan Varwig
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2015-08-14 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 3.1.0
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 3.1.0
+- !ruby/object:Gem::Dependency
+  name: rack-livereload
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 0.3.16
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 0.3.16
+description: |2
+      Rails Plugin to augment frontend development with a gulp/webpack based
+      workflow.
+
+      - Installs Javascript infrastructure in your Rails project to manage
+        frontend assets
+      - Provides view helpers to Rails that allow you to easily reference
+        gulp generated assets from Rails views
+      - Puts Livereload into the Rails middleware stack. This injects the
+        Livereload client into Rails-renderd pages, updates are triggered from
+        gulp.
+email:
+- jan.varwig@hitfoxgroup.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- MIT-LICENSE
+- README.md
+- lib/generators/gulp_assets_generator.rb
+- lib/gulp_assets.rb
+- lib/gulp_assets/railtie.rb
+- lib/gulp_assets/version.rb
+- lib/gulp_assets/view_helpers.rb
+- lib/tasks/gulp_assets_tasks.rake
+- template/.eslintrc
+- template/frontend/assets/.empty_directory
+- template/frontend/javascripts/actions/.empty_directory
+- template/frontend/javascripts/components/.empty_directory
+- template/frontend/javascripts/constants/.empty_directory
+- template/frontend/javascripts/main.js
+- template/frontend/javascripts/stores/.empty_directoty
+- template/frontend/stylesheets/main.scss
+- template/gulpfile.js
+- template/package.json.tt
+- template/webpack.common.config.js
+- template/webpack.config.js
+- template/webpack.hot.config.js
+homepage: http://github.com/hitfox/gulp_assets/
+licenses:
+- MIT
+metadata: {}
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">"
+    - !ruby/object:Gem::Version
+      version: 1.3.1
+requirements: []
+rubyforge_project: 
+rubygems_version: 2.4.5
+signing_key: 
+specification_version: 4
+summary: Integrate Gulp with Rails
+test_files: []