Geek Answers Handbook

Using SASS with the Aurelia Skeleton Navigation Project

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'm not sure how to reference System.config ({"map": {short hand to paths.

I am trying to use materialize css structure, so I imported it with

 jspm install github:Dogfalo/ materialize@0.96.0

which worked fine, but now I'm worried that in my build task I have to reference the specific path to the sass folder, including version numbers in the includePaths property

If I look at the config.js file, jspm saved the link for materialization in the System.config.map section, it seems that if I could just refer to the name of the short hand manual in the code below, this would solve my problem

Here is my build task that I added in 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 a better way to enable the github package, for example, materialize with jspm and reference it in code that allows jspm to manage the package and version and just reference the shortened version of jspm

Thanks Dan

+5
source share
1 answer

SASS build task

You will need to install gulp -sass, as you mentioned. Then you need to add the following task to the assembly file. Please note that the plumber is part of the task and has also changed. This will lead to the fact that the clock will restore your sask when you edit it, and not break the work with syntax errors.

 // compiles sass to css with sourcemaps gulp.task('build-css', function() { return gulp.src(paths.style) .pipe(plumber()) .pipe(changed(paths.style, {extension: '.css'})) .pipe(sourcemaps.init()) .pipe(sass()) .pipe(sourcemaps.write()) .pipe(gulp.dest('./styles')); });

Build task

You also need to add this new sass build task to your overall build task so that it is included in the build pipeline.

 gulp.task('build', function(callback) { return runSequence( 'clean', ['build-system', 'build-html', 'build-css'], callback ); });

Using CSS framework in code

As you mentioned, if jspm install materialize allows jspm to take care of all the hard lifting for you. After installation, jspm will change the configuration paths to indicate the desired location. Then, when you need to reference it in code, you can import it in the usual way. To install, you want to add materialization to your package.json dependencies.

 "jspm": { "dependencies": { "materialize": "github:Dogfalo/ materialize@0.96.0 ",

Then jspm will configure the map for you so that you can use the standard module syntax.

 import 'materialize/js/collapsible';

Materialize does not use module syntax, so for now, you need to (a) import each part that you need, as described above, and (b) manually import jQuery, since materialization does not declare a dependency.

For more information, see my full entry, including examples here: http://www.foursails.co/blog/building-sass/

+18
source

More articles:


All Articles