2017-02-10 2 views
0

Я пытаюсь использовать gulp-cssbeautify в своих проектах, но я не могу заставить его работать. У меня есть следующая зависимость, которые работают нормально, за исключением gulp-cssbeautifygulp-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

+0

Не могли бы вы быть более конкретными в отношении того, что вы подразумеваете под «нерабочим»? Создаются ли файлы CSS в неправильном месте? Они исчезают? Вы получаете стек? – gandreadis

+0

не работает. Я имею в виду, что ничего не происходит. –

ответ

0

Ваших css задачи определяют gulp.src('.dev/css/*.css'). Похоже, вы имеете в виду ./dev не .dev.

Я рекомендую прочитать ваш gulpfile и распрямить имена ваших каталогов. Иногда вы используете переменные, иногда вы этого не делаете. В этом примере, не изменяя ничего, вы могли бы просто указать gulp.src(cssSource) в задаче css

Смежные вопросы