gulp-cssbeautify无效

Question

我试图在我的项目中使用gulp-cssbeautify，但我无法使其发挥作用。 除了gulp-cssbeautify

之外，我还有以下依赖项工作正常

  " gulp": "^3.9.1",
    "gulp-browserify": "^0.5.1",
    "gulp-concat": "^2.6.1",
    "gulp-connect": "^5.0.0",
    "gulp-cssbeautify": "^0.1.3",
    "gulp-sass": "^3.0.0",
    "gulp-sourcemaps": "^2.4.0",
    "gulp-util": "^3.0.8"

这是我的gulpfile.js代码：

 var gulp = require('gulp'),
    gutil = require('gulp-util'),
    browserify = require('gulp-browserify'),
    connect = require('gulp-connect'),
    concat = require('gulp-concat'),
    sourceMap = require('gulp-sourcemaps'),
    sass = require('gulp-sass'),
    cssbeautify = require('gulp-cssbeautify');


var env, jsSources, sassSources, htmlSources, sassStyle, outputDir , cssSource;

var env = process.env.NODE_ENV || 'dev';
outputDir = 'dev/';
sassStyle = 'expanded';


jsSources = ['components/scripts/*.js'];
sassSources = ['components/sass/screen.scss'];
htmlSources = [outputDir + '*.html'];
cssSource = ['./' + outputDir + 'css/*.css'];

//gulp.task('js', function() {
//    gulp.src(jsSources)
//        .pipe(concat('script.js'))
//        .pipe(browserify())
//        .pipe(gulp.dest(outputDir + 'scripts'))
//        .pipe(connect.reload())
//});

gulp.task('sass', function() {
    gulp.src(sassSources)
    .pipe(sourceMap.init())
        .pipe(sass({
                compass: true,
                css: outputDir + 'css',
                sass: 'components/sass',
                image: outputDir + 'images',
                style: sassStyle
                    //comments: true,
                    //require: ['susy', 'modular-scale']
            })
            .on('error', gutil.log))
        .pipe(sourceMap.write('./maps'))
        .pipe(gulp.dest(outputDir + 'css'))
        .pipe(connect.reload());
});

gulp.task('css', function() {
    return gulp.src('.dev/css/*.css')
        .pipe(cssbeautify({
            indent: '  ',
            openbrace: 'end-of-line',
            autosemicolon: true
        }))
        .pipe(gulp.dest('./dev/css/'));
});

gulp.task('watch', function() {
//    gulp.watch(jsSources, ['js']);
    gulp.watch('components/sass/**/*.scss', ['sass']);
    gulp.watch(htmlSources, ['html']);
    gulp.watch('.dev/css/*.css', ['css']);
});

gulp.task('connect', function() {
    connect.server({
        root: outputDir,
        livereload: true
    });
});

gulp.task('html', function() {
    gulp.src(htmlSources)
        .pipe(connect.reload())
});

gulp.task('default', ['html', 'sass', 'css', 'connect', 'watch']);

我的css文件的文件夹结构是project/dev/css/*.css

Answer 1

您的css任务指定gulp.src('.dev/css/*.css')。您的意思是./dev而不是.dev。

我建议您阅读gulpfile并理清您的目录名称。有时您使用变量，有时您不会。在此示例中，您无需更改任何其他内容，只需在gulp.src(cssSource)任务中找到css