将 SASS 用于 Aurelia 的骨架导航项目

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 属性[=14= 中的版本号]

如果我查看 config.js 文件，jspm 在 System.config.map 部分下保存了对 materialize 的引用，看来我是否可以在下面的代码中引用简写 materialize 名称这会解决我的问题

这是我添加到 build.js

的构建-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 实现并在代码中引用它，让 jspm 管理包和版本并仅引用 jspm 创建的 shorthand

谢谢，旦

Answer 1

SASS构建任务

您需要安装 gulp-sass，就像您提到的那样。然后，您需要将以下任务添加到构建文件中。请注意，该任务包括水管工并且也发生了变化。这将在您编辑 sass 时向 watch 发出信号，并且不会因语法错误而中断服务。

// 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 将修改配置路径以指向正确的位置。然后，当你需要在代码中引用它时，你可以正常导入它。要安装，您需要将 materialize 添加到 package.json 依赖项中。

"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/

将 SASS 用于 Aurelia 的骨架导航项目

Using SASS with Aurelia's Skeleton Navigation project

sass

gulp

aurelia

jspm