Gulp sass已停止输出style.min.css,但其他文件正在运行

时间:2016-11-17 10:44:50

标签: css wordpress sass gulp

我最近对我的scss文件夹进行了一些结构编辑,现在主要的CSS文件没有输出,我似乎无法弄清楚是什么错误。

该结构基于Foundation。这是我的gulpfile.js:

var gulp        = require('gulp'),
gutil           = require('gulp-util'),
gp_concat       = require('gulp-concat'),
gp_rename       = require('gulp-rename'),
gp_uglify       = require('gulp-uglify'),
gp_clean        = require('gulp-clean-css'),
gp_image        = require('gulp-imagemin'),
pngquant        = require('imagemin-pngquant'),
browserSync     = require('browser-sync').create(),
$               = require('gulp-load-plugins')();

var PATHS = {
    sass: [
    'bower_components/foundation-sites/scss',
    'bower_components/motion-ui/src'
    ],
    javascript: [
        // All in assets
        'src/js/**/*.js'
        ]
    };

    gutil.log(gutil.colors.red('Don\'t forget to add the proxy domain to gulpfile.js!'));
    gutil.beep();

    gulp.task('serve', ['sass'], function() {

        browserSync.init({
        // Insert new domain here
        proxy: 'hellosweden.dev'
    });

        gulp.watch(['src/scss/modules/**/*.scss', 'src/scss/partials/**/*.scss', 'src/scss/vendors/**/*.scss'], ['sass']);
        gulp.watch('src/js/**/*.js', ['js']);
        gulp.watch(['*.php', '**/*.php']).on('change', browserSync.reload);

    });

    gulp.task('sass', function() {
        return gulp.src('src/scss/app.scss')
        .pipe($.sass({
            includePaths: PATHS.sass
        }))
        .pipe($.sourcemaps.init())
        .pipe($.sass().on('error', $.sass.logError))
        .pipe($.sourcemaps.write())
        .pipe($.autoprefixer({
            browsers: ['last 2 versions', 'ie >= 9']
        }))
        .pipe(gp_rename('style.css'))
        .pipe(gulp.dest('dist/css'))
        .pipe(gp_rename('style.min.css'))
        .pipe(gp_clean({debug: true}, function(details) {
            console.log(details.name + ': ' + details.stats.originalSize);
            console.log(details.name + ': ' + details.stats.minifiedSize);
        }))
        .pipe(gulp.dest('dist/css'))
        .pipe(browserSync.stream());
    });

    gulp.task('admin', function() {
        return gulp.src('src/scss/admin-style.scss')
        .pipe($.sass()
            .on('error', $.sass.logError))
        .pipe($.autoprefixer({
            browsers: ['last 2 versions', 'ie >= 9']
        }))
        .pipe(gp_rename('admin.min.css'))
        .pipe(gp_clean({debug: true}, function(details) {
            console.log(details.name + ': ' + details.stats.originalSize);
            console.log(details.name + ': ' + details.stats.minifiedSize);
        }))
        .pipe(gulp.dest('dist/css'));
    });

    gulp.task('editor', function() {
        return gulp.src('src/scss/editor-style.scss')
        .pipe($.sass()
            .on('error', $.sass.logError))
        .pipe($.autoprefixer({
            browsers: ['last 2 versions', 'ie >= 9']
        }))
        .pipe(gp_clean({debug: true}, function(details) {
            console.log(details.name + ': ' + details.stats.originalSize);
            console.log(details.name + ': ' + details.stats.minifiedSize);
        }))
        .pipe(gulp.dest('dist/css'));
    });

    gulp.task('js', function() {
        return gulp.src(PATHS.javascript)
        .pipe($.sourcemaps.init())
        .pipe(gp_concat('global.js'))
        .pipe($.sourcemaps.write())
        .pipe(gulp.dest('dist/js'))
        .pipe(gp_rename('global.min.js'))
        .pipe(gp_uglify())
        .pipe(gulp.dest('dist/js'));
    });

// Copy images to the "dist" folder
// In production, the images are compressed
gulp.task('images', function() {
    return gulp.src('src/img/*')
    .pipe(gp_image({
        progressive: true,
        use: [pngquant()]
    }))
    .pipe(gulp.dest('dist/img'));
});

// Copy fonts to the "dist" folder
gulp.task('fonts', function() {
    return gulp.src('src/fonts/*')
    .pipe(gulp.dest('dist/fonts'));
});

gulp.task('default', ['serve', 'sass', 'js', 'images', 'fonts', 'admin', 'editor'], function() {
    gulp.watch(['src/scss/modules/**/*.scss', 'src/scss/partials/**/*.scss', 'src/scss/vendors/**/*.scss'], ['sass']);
    gulp.watch(['src/js/*.js'], ['js']);
    gulp.watch(['src/img/*'], ['images']);
    gulp.watch(['src/fonts/*'], ['fonts']);
    gulp.watch(['src/scss/admin-style.scss', 'src/scss/admin/*.scss'], ['admin']);
    gulp.watch(['src/scss/editor-style.scss', 'src/scss/editor/*.scss'], ['editor']);
});

这就是我的文件夹结构:

Folder structure for style.css

正如您所看到的,输出了三个不同的css文件(对于WordPress项目):一个主要的style.css文件,一个admin.css用于管理面板中的所有内容,最后一个用于TinyMCE编辑器的editor.css 。最后两个文件正在正确输出,但style.css / style.min.css文件根本没有更新。

我也没有收到任何错误消息。我唯一能说出我在管理/编辑部分做正确事情的是这些输出:

Terminal output

我真的希望我能够公然地遗漏一些东西。请帮我弄清楚是什么。

0 个答案:

没有答案