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": { パスの省略形。

マテリアライズ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',  //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))
});

または、jspm を使用して実体化するなどの github パッケージを含め、それをコードで参照して、jspm にパッケージとバージョンを管理させ、jspm が作成した短縮形を参照するためのより良い方法がある場合

ありがとう、ダン

4

1 に答える 1

18

SASS ビルド タスク

あなたが言及したように、gulp-sassをインストールする必要があります。次に、次のタスクをビルド ファイルに追加します。タスクには配管工が含まれており、同様に変更されていることに注意してください。これにより、編集時に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';

マテリアライズはモジュール構文を使用していないため、現時点では、(a) 上記のように具体的に必要な各ピースをインポートし、(b) マテリアライズは依存関係を宣言しないため、手動で jQuery をインポートする必要があります。

詳細については、こちらの例を含む私の完全な記事をご覧ください: http://www.foursails.co/blog/building-sass/

于 2015-04-20T14:04:31.750 に答える