1

私は非常に単純なタスクを設定しましたgulpfile.js。「sass」と「minify-js」の 2 つのタスクしかありません。これら 2 つのタスクは、変更が検出されたときに「watch」タスクによって起動されます。すべてうまくいっているようです: Gulp は変更をリッスンし、*.scss ファイルは CSS にコンパイルされ、コンソールは期待どおりにエラーなしで出力を生成します。ただし、CSS ファイルは縮小されず、「minify-css」タスクからの出力ファイルはまったくありません。

「minify-css」が機能しないのはなぜですか? ここで何が欠けていますか？

これは私の gulpfile.js です:

var gulp = require('gulp');
var sass = require('gulp-sass');
var watch = require('gulp-watch');
var minifyCSS = require('gulp-minify-css');

gulp.task('sass', function() {
    gulp.src('plugins/SoSensational/styles/sass/*.scss')
            .pipe(sass())
            .pipe(gulp.dest('plugins/SoSensational/styles/dest/'));
});

gulp.task('minify-css', function() {
    gulp.src('plugins/SoSensational/styles/dest/*.css')
            .pipe(minifyCSS())
            .pipe(gulp.dest('plugins/SoSensational/styles/dest/'));
});

gulp.task('watch', function() {
    gulp.watch('plugins/SoSensational/styles/sass/*.scss', ['sass', 'minify-css']);
});
4

3 に答える 3

2

競合状態のように聞こえます。Sass と MinifyCSS は並行して実行されます。既に MinifyCSS を実行している場合、Sass タスクが完了していない可能性があります。Sass は依存関係にある必要があるため、次の 2 つのオプションがあります。

  1. minifycss から Sass を依存関係にします。

    gulp.task('minify-css', ['sass'], function() {
    return gulp.src('plugins/SoSensational/styles/dest/*.css')
        .pipe(minifyCSS())
        .pipe(gulp.dest('plugins/SoSensational/styles/dest/'));
});

gulp.task('watch', function() {
     gulp.watch('plugins/SoSensational/styles/sass/*.scss', ['minify-css']);
});

  2. 両方を行う 1 つのタスクを用意してください。

    gulp.task('sass', function() {
     return gulp.src('plugins/SoSensational/styles/sass/*.scss')
         .pipe(sass())
         .pipe(minifyCSS())
         .pipe(gulp.dest('plugins/SoSensational/styles/dest/'));
});

後者は実際に推奨されるバージョンです。中間結果がなければ、多くの時間を節約できます

ところで： return ステートメントを忘れないでください

于 2015-04-01T13:37:43.700 に答える
1

これは一種の古い質問であることは知っていますが、私を助けてくれたので、これを捨てようと思いました。ddprrt からの回答に基づいて構築するには、次の変更をお勧めします。

gulp.task('sass', function() {
     return gulp.src('plugins/SoSensational/styles/sass/*.scss')
         .pipe(sass())
         .pipe(minifyCSS())
         .pipe(gulp.dest('plugins/SoSensational/styles/dest/'));
});

に：

var rename = require('gulp-rename');

gulp.task('sass', function() {
     return gulp.src('plugins/SoSensational/styles/sass/*.scss')
         .pipe(sass('site.css'))
         .pipe(gulp.dest('plugins/SoSensational/styles/dest/'))
         .pipe(minifyCSS())
         .pipe(rename('site.min.css'))
         .pipe(gulp.dest('plugins/SoSensational/styles/dest/'));
});

これにより、縮小されていない CSS を使用してデバッグし、縮小されたバージョンをデプロイできます。

于 2016-06-02T12:30:34.833 に答える