gulp-cssbeautifyが機能しない

Question

私のプロジェクトでgulp-cssbeautifyを使用しようとしていますが、動作させることができません。 私はこれは私のgulpfile.jsコードである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" 

除いて正常に動作している次の依存関係を持っている：CSSファイル用

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']); 

マイフォルダ構造はproject/dev/css/*.css

Answer 1

あなたcssタスクが指定されgulp.src('.dev/css/*.css')。 ./devではなく、.devのように見えます。

gulpfileで読んで、ディレクトリ名をまっすぐにすることをお勧めします。時には変数を使用することもあります。この例では、他に何も変更せずにcssタスクにgulp.src(cssSource)を指定するだけです。