将SASS与Aurelia的Skeleton Navigation项目结合使用

Question

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']);

我有gulp-sass工作,但我不知道如何引用System.config({"map":{短手到路径.

我正在尝试使用materialize css框架,所以我使用它导入它

jspm install github:Dogfalo/materialize@0.96.0

哪个工作正常,但我现在担心的是,在我的构建任务中,我必须引用sass文件夹的特定路径,包括includePaths属性中的版本号

如果我查看config.js文件,jspm在System.config.map部分下保存了对materialize的引用,似乎我只能在下面的代码中引用short hand materialize名称这将解决我的问题

这是我在build.js中添加的build-sass任务

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))
});

或者,如果您有更好的方法来包含github包,例如使用jspm实现materialize并在代码中引用它,让jspm管理包和版本,并仅引用jspm创建的简写

谢谢,丹

Answer 1

SASS构建任务

你需要像你提到的那样安装gulp-sass.然后,您将要将以下任务添加到构建文件中.请注意,任务包括管道工并且也已更改.这将指示watch在您编辑它时重建您的sass并且不会因语法错误而中断服务.

// 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'));
});

构建任务

您还需要将这个新的sass构建任务添加到常规构建任务中,以便它包含在构建管道中.

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

在代码中使用CSS框架

正如您所提到的,让jspm安装实现将让jspm为您处理所有繁重的工作.安装完成后,jspm将修改配置路径以指向正确的位置.然后,当您需要在代码中引用它时,您可以正常导入它.要安装,您需要在package.json依赖项中添加materialize .

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

然后,jspm将为您设置一个映射,以便您可以使用常规模块语法.

import 'materialize/js/collapsible';

Materialize不使用模块语法,所以,目前,您需要(a)导入您想要的每个部分,如上所述,以及(b)手动导入jQuery,因为materialize不声明依赖性.

有关更多信息,请参阅我的完整文章,包括示例:http: //www.foursails.co/blog/building-sass/