我最近对我的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']);
});
这就是我的文件夹结构:
正如您所看到的,输出了三个不同的css文件(对于WordPress项目):一个主要的style.css文件,一个admin.css用于管理面板中的所有内容,最后一个用于TinyMCE编辑器的editor.css 。最后两个文件正在正确输出,但style.css / style.min.css文件根本没有更新。
我也没有收到任何错误消息。我唯一能说出我在管理/编辑部分做正确事情的是这些输出:
我真的希望我能够公然地遗漏一些东西。请帮我弄清楚是什么。