Использование SASS с проектом 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']);

Я глотком-дерзость работает, но я не уверен, как ссылаться на System.config ({ «карта»: {короткие руки к дорожкам.

Я пытаюсь использовать рамки материализовать CSS, поэтому я импортировать его с помощью

jspm install github:Dogfalo/materialize@0.96.0 

, который работал хорошо, но мой конц ern теперь заключается в том, что в моей задаче построения я должен ссылаться на конкретный путь к папке sass, включая номера версий в свойстве includePaths

Если я смотрю файл config.js, jspm сохраняет ссылку для материализации в Системе .config.map раздел, кажется, если бы я мог просто сослаться на короткую руку материализовать имя в коде ниже это будет решить мою проблему

Вот моя сборка-дерзость задача, которую я добавил 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 созданного

Спасибо, Dan

Answer 1

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

Сложение задача

Вам также нужно добавить эту новую задачу дерзости сборки для вашей общей задачи построения, так что он входит в трубопроводе сборки.

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

Использование рамки CSS в коде

Как уже упоминалось, имея JSPM установить материализовать позволит JSPM взять на себя все тяжелую работу за вас. После установки jspm изменит пути конфигурации, чтобы указать на нужное место. Затем, когда вам нужно ссылаться на него в коде, вы можете импортировать его в обычном режиме. Чтобы установить, вы захотите добавить материализацию в свои зависимости package.json.

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

Затем jspm настроит для вас карту, чтобы вы могли использовать стандартный синтаксис модуля.

import 'materialize/js/collapsible'; 

материализовать не используется синтаксис модуля так, на данный момент, вам нужно будет (а) импортировать каждый кусок, который вы хотите конкретно, как указано выше, и (б) вручную импортировать JQuery, так как материализовать Безразлично» t объявлять зависимости.

Для получения дополнительной информации, пожалуйста, см мой полный подправить включая примеры здесь: http://www.foursails.co/blog/building-sass/