var gulp = require('gulp');
var sass = require('gulp-sass');
var runSequence = require('run-sequence');
var changed = require('gulp-changed');
var plumber = require('gulp-plumber');
var to5 = require('gulp-babel');
var sourcemaps = require('gulp-sourcemaps');
var paths = require('../paths');
var compilerOptions = require('../babel-options');
var assign = Object.assign || require('object.assign');
// transpiles changed es6 files to SystemJS format
// the plumber() call prevents 'pipe breaking' caused
// by errors from other gulp plugins
// https://www.npmjs.com/package/gulp-plumber
gulp.task('build-system', function () {
return gulp.src(paths.source)
.pipe(plumber())
.pipe(changed(paths.output, {extension: '.js'}))
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(to5(assign({}, compilerOptions, {modules:'system'})))
.pipe(sourcemaps.write({includeContent: false, sourceRoot: paths.sourceMapRelativePath }))
.pipe(gulp.dest(paths.output));
});
gulp.task('build-sass', function() {
gulp.src(paths.sass + '**/*.scss')
.pipe(sourcemaps.init())
.pipe(sass({
style: 'expanded',
includePaths: [
paths.sass,
paths.jspmDir + '/github/Dogfalo/materialize@0.96.0/sass',
],
errLogToConsole: true }))
.pipe(sourcemaps.write(paths.sourceMapRelativePath))
.pipe(gulp.dest(paths.cssOutput))
});
// copies changed css files to the output directory
gulp.task('build-css', function () {
return gulp.src(paths.css)
.pipe(changed(paths.output, {extension: '.css'}))
.pipe(gulp.dest(paths.output));
});
// copies changed html files to the output directory
gulp.task('build-html', function () {
return gulp.src(paths.html)
.pipe(changed(paths.output, {extension: '.html'}))
.pipe(gulp.dest(paths.output));
});
// this task calls the clean task (located
// in ./clean.js), then runs the build-system
// and build-html tasks in parallel
// https://www.npmjs.com/package/gulp-run-sequence
gulp.task('build', function(callback) {
return runSequence(
'clean',
['build-system', 'build-html','build-css','build-sass'],
callback
);
});
gulp.task('default', ['build']);
I have gulp-sass working but I am not sure how to reference the System.config({ "map": { short hand to paths.
I am trying to use the materialize css framework so I imported it using
jspm install github:Dogfalo/materialize@0.96.0
which worked fine, but my concern now is that in my build task I have to reference the specific path to the sass folder including the version numbers in the includePaths property
If I look at the config.js file, jspm saved a reference to materialize under the System.config.map section, it seems if I could just reference the short hand materialize name in the code below this would solve my problem
Here is my build-sass task that I added to build.js
gulp.task('build-sass', function() {
gulp.src(paths.sass + '**/*.scss')
.pipe(sourcemaps.init())
.pipe(sass({
style: 'expanded',
includePaths: [
paths.sass,
paths.jspmDir + '/github/Dogfalo/materialize@0.96.0/sass', //I would like to just reference to shorcut path included in the config.js to materialize
],
errLogToConsole: true }))
.pipe(sourcemaps.write(paths.sourceMapRelativePath))
.pipe(gulp.dest(paths.cssOutput))
});
Or if you have any better way to include a github package such as materialize using jspm and reference it in code letting jspm manage the package and version and just referencing the shorthand that jspm created
Thanks, Dan