在 Aurelia 的 Skeleton Navigation 项目中使用 SASS [英] Using SASS with Aurelia's 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']);

我有 gulp-sass 工作，但我不知道如何引用 System.config({地图":{ 路径的简写.

I have gulp-sass working but I am not sure how to reference the System.config({ "map": { short hand to paths.

我正在尝试使用 materialize css 框架，所以我使用

I am trying to use the materialize css framework so I imported it using

jspm install github:Dogfalo/materialize@0.96.0

效果很好，但我现在担心的是，在我的构建任务中，我必须引用 sass 文件夹的特定路径，包括 includePaths 属性中的版本号

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

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

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

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

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

或者如果你有更好的方法来包含一个 github 包，比如使用 jspm 实现并在代码中引用它，让 jspm 管理包和版本，并且只引用 jspm 创建的速记

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

谢谢，丹

推荐答案

SASS 构建任务

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

You'll need to install gulp-sass, like you mentioned. Then, you'll want to add the following task to your build file. Notice the task includes plumber and changed as well. This will signal watch to rebuild your sass when you edit it and not break serving on 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'));
});

构建任务

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

You'll also need to add this new sass build task to your general 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
  );
});

在代码中使用 CSS 框架

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

As you mentioned, having jspm install materialize will let jspm take care of all the heavy lifting for you. Once installed, jspm will modify the config paths to point to the right place. Then, when you need to reference it in code, you can import it normally. To install, you will want to add materialize to your package.json dependencies.

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

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

Then, jspm will set up a map for you so you can use the normal module syntax.

import 'materialize/js/collapsible';

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

Materialize is not using the module syntax so, at the moment, you will need to (a) import each piece that you want specifically, as above, and (b) manually import jQuery, since materialize doesn't declare dependencies.

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

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

这篇关于在 Aurelia 的 Skeleton Navigation 项目中使用 SASS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！