• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

waka/gulp-sprockets: sprockets implemented by node.js

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称(OpenSource Name):

waka/gulp-sprockets

开源软件地址(OpenSource Url):

https://github.com/waka/gulp-sprockets

开源编程语言(OpenSource Language):

JavaScript 94.1%

开源软件介绍(OpenSource Introduction):

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



鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
sindresorhus/gulp-tar: Create tarball from files发布时间:2022-06-21
下一篇:
sf-wdi-gaia/gulp: [gulp, tools, js]发布时间:2022-06-21
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap