5 

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": { short hand to paths.

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

jspm install github:Dogfalo/materialize@0.96.0

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

如果我查看 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',  //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 创建的简写

谢谢，丹

4

1 回答 1

18

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 install 实现将使 jspm 为您处理所有繁重的工作。安装后，jspm 将修改配置路径以指向正确的位置。然后，当您需要在代码中引用它时，您可以正常导入它。要安装，您需要将物化添加到您的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/

于 2015-04-20T14:04:31.750 回答