在Aurelia的骨架导航项目中使用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 var'）; var to5 = require（'gulp-babel'）; var sourcemaps = require（'gulp-sourcemaps'）; var paths = require（'../ path'）; var compilerOptions = require（'../ babel-options'）; var assign = Object.assign || require（'object.assign'）; //将es6文件转换为SystemJS格式// plumber（）调用可以防止由其他gulp插件引起的错误导致的'pipe breaking'// https://www.npmjs.com /package/gulp-plumbergulp.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 +'* （sourcemaps.init（））.pipe（sass（{style：'expanded'，includePaths：[paths.sass，paths.jspmDir +'/ github / Dogfish / materialize / sass'，]，errLogToConsole：true}））.pipe（sourcemaps.write（paths.so urceMapRelativePath））.pipe（gulp.dest（paths.cssOutput））}）; //将更改后的css文件复制到输出目录gulp.task（'build-css'，function（）{return gulp.src（paths.css） .pipe（更改（paths.output，{extension：'.css'}））.pipe（gulp.dest（paths.output））;}）; //将更改后的html文件复制到输出目录gulp.task（'build -html'，function（）{return gulp.src（paths.html）.pipe（changed（paths.output，{extension：'.html'}））.pipe（gulp.dest（paths.output））;} ）; //这个任务调用干净的任务（位于/// in ./clean.js），然后并行运行构建系统//和构建html任务// https://www.npmjs.com/package /gulp-run-sequencegulp.task('build'，function（callback）{return runSequence（'clean'，['build-system'，'build-html'，'build-css'，'build-sass'] ，callback）;}）; gulp.task（'default'，['build']）;  

$ b

我有gulp-sass工作，但我不确定如何引用t他System.config（{
映射：{短路到路径。

我试图使用物化css框架，因此我使用

  jspm install github：Dogfalo / materialize@0.96.0 
  

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

如果我查看config.js文件，jspm在System.config.map节中保存了对物化的引用，似乎如果我只能在下面的代码中引用短物质化名称，这将解决我的问题。

这是我添加到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'，//我想引用包含在config.js中的shorcut路径来实现
]，
 errLogToConsole：true} ））
 .pipe（sourcemaps.write（paths.sourceMapRelativePath））
.pipe（gulp.dest（paths.cssOutput））
}）; 
  

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

感谢，
Dan

解决方案

SASS构建任务

您需要安装gulp-sass提及。然后，您需要将以下任务添加到构建文件中。注意任务包括水管工并且也改变了。这会在你编辑它时重新编译你的sass，并且不会中断服务语法错误。

  //编译sass到css使用源地图
 gulp.task（'build-css'，function（）{
 return gulp.src（paths.style）
 .pipe（plumber（））
 .pipe （更改（paths.style，{extension：'.css'}））
 .pipe（sourcemaps.init（））
 .pipe（sass（））
 .pipe（sourcemaps。 write（））
 .pipe（gulp.dest（'./ styles'））; 
}）; 
  

构建任务

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

  gulp.task（'build'，function（callback）{
 return runSequence（$ b $'clean'，
''build-system'，'build-html'， 'build-css']，
 callback 
）; 
}）; 
  

在代码中使用CSS框架

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

 jspm：{
dependencies：{
materialize：github：Dogfalo / materialize@0.96.0，
  pre> 
 
 
然后，jspm会为你设置一个地图，这样你就可以使用普通的模块语法。
  import'materialize / js / collapsible'; 
  
 Materialize没有使用模块语法，因此目前需要（a）导入（b）手动导入jQuery，因为materialize不声明依赖关系。
 
 
 
有关更多信息，请参阅我的完整写入包括这里的例子：
  http://www.foursails.co/blog/building-sass/ 
 


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
解决方案
SASS build task

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

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
  );
});
Using a CSS framework in code

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",
Then, jspm will set up a map for you so you can use the normal module syntax.
import 'materialize/js/collapsible';
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.

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

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