0

我的编译 sass 文件没有被选中用于在一个命令中使用 gulp-css 进行缩小时遇到问题。

我的 gulpfile.js 文件如下：

var gulp = require('gulp'),
    uglify = require('gulp-uglify'),
    concat = require('gulp-concat'),
    sass = require('gulp-sass'),
    cssMin = require('gulp-css');

gulp.task('sass', function() {

    gulp.src('./scss/app.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest('./css/front'));

    gulp.src('./scss/wysiwyg.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest('./css/front'));

});

gulp.task('css', function() {

    gulp.src([
        './css/front/wysiwyg.css'
        ])
        .pipe(concat('wysiwyg.css'))
        .pipe(cssMin())
        .pipe(gulp.dest('./css'));

    gulp.src([
        './css/admin/core.css',
        './js/plugin/jquery-ui/jquery-ui.css',
        './css/admin/fileuploader.css',
        './js/plugin/imgareaselect-master/distfiles/css/imgareaselect-animated.css',
        './css/fa/css/font-awesome.css'
        ])
        .pipe(concat('app-admin.css'))
        .pipe(cssMin())
        .pipe(gulp.dest('./css'));

    gulp.src([
        './css/front/animate.css',
        './bower_components/OwlCarousel2/src/css/owl.theme.default.css',
        './bower_components/OwlCarousel2/src/css/owl.autoheight.css',
        './bower_components/OwlCarousel2/src/css/owl.animate.css',
        './bower_components/OwlCarousel2/src/css/owl.carousel.css',
        './js/plugin/touchTouch/touchTouch.css',
        './css/fa/css/font-awesome.css',
        './css/front/app.css'
        ])
        .pipe(concat('app.css'))
        .pipe(cssMin())
        .pipe(gulp.dest('./css'));

});

gulp.task('scripts', function() {

    gulp.src([
        './bower_components/modernizr/modernizr.js'
        ])
        .pipe(concat('modernizr.js'))
        .pipe(uglify())
        .pipe(gulp.dest('js'));

    gulp.src([
        './bower_components/jquery/dist/jquery.js',
        './js/plugin/jquery-ui/jquery-ui.js',
        './js/plugin/jquery.easing.min.js',
        './js/plugin/mdn-bind.js',
        './js/plugin/jquery.cookie.js',
        './js/plugin/jquery.livequery.js',
        './js/plugin/preload/jquery.imgpreload.min.js',
        './js/plugin/jquery.tablednd.0.7.min.js',
        './js/plugin/jquery.tinysort.min.js',
        './js/plugin/uploader/fileuploader.min.js',
        './js/plugin/imgareaselect-master/jquery.imgareaselect.dev.js',
        './node_modules/jquery-datetimepicker/jquery.datetimepicker.js'
        ])
        .pipe(concat('libs-admin.js'))
        .pipe(uglify())
        .pipe(gulp.dest('./js'));

    gulp.src([
        './js/object/systemObject.js',
        './js/object/formObject.js',
        './js/object/adminObject.js',
        './js/object/uploadObject.js',
        './js/object/dialogObject.js',
        './js/object/imageObject.js',
        './js/module/admin.js'
    ])
        .pipe(concat('app-admin.js'))
        .pipe(uglify())
        .pipe(gulp.dest('./js'));

    gulp.src([
        './node_modules/angular/angular.js',
        './node_modules/angular-cookies/angular-cookies.js',
        './node_modules/angular-messages/angular-messages.js',
        './bower_components/jquery/dist/jquery.js',
        './js/plugin/touchTouch/touchCmd.jquery.js',
        './bower_components/OwlCarousel2/src/js/owl.carousel.js',
        './bower_components/OwlCarousel2/src/js/owl.autoplay.js',
        './bower_components/OwlCarousel2/src/js/owl.animate.js',
        './bower_components/OwlCarousel2/src/js/owl.navigation.js',
        './bower_components/foundation/js/foundation/foundation.js',
        './bower_components/foundation/js/foundation/foundation.equalizer.js',
        './bower_components/fastclick/lib/fastclick.js'
        ])
        .pipe(concat('libs.js'))
        .pipe(uglify())
        .pipe(gulp.dest('./js'));

    gulp.src([
        './js/angular/module.js',
        './js/angular/filters/**/*.js',
        './js/angular/services/**/*.js',
        './js/angular/directives/**/*.js',
        './js/angular/controllers/**/*.js',
        './js/object/Template.js',
        './js/module/front.js'
        ])
        .pipe(concat('app.js'))
        .pipe(uglify())
        .pipe(gulp.dest('./js'));

});

gulp.task('default', ['sass', 'css', 'scripts']);

现在，问题在于我必须实际运行gulp两次命令才能在下一轮 css 缩小中选择已编译的 sass 文件。

知道如何做到这一点，以便在处理后直接被挑选出来吗？

4

1 回答 1

2

默认情况下，您的sass、css和scripts是同时执行的。因此，您的css任务将缩小在执行任务之前已编译的 sass sass。解决此问题的最简单方法是使sass任务成为任务的依赖css项。这确保sass任务在任务之前css执行。

您的css任务将如下所示：

gulp.task('css', ['sass'], function {
   // your current body here
});

然后，您可以sass从任务中删除该任务default，使其看起来像这样：

gulp.task('default', ['css', 'scripts']);
于 2015-08-11T13:41:33.500 回答