css - 为什么 gulp 不创建 css 目标文件夹？

Question

我的同事有这个确切的代码，并且能够毫无问题地运行 gulp，但我似乎无法编译 css 文件。 Gulp 不会生成 css 目标文件或文件本身。 Gulp 使 build 和 js 文件夹没有任何问题，只有 css 有问题。每个包都是最新版本。

这让我相信这可能是一个环境问题。即使重新安装 Node 后，问题仍然存在。

Node 版本:v4.4.4

npm 版本:2.15.1

路径:/Users/[me]/perl5/perlbrew/bin:/Users/[me]/perl5/perlbrew/perls/perl-5.16.0/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin

这是我的 gulp 文件:

    var gulp = require('gulp'),                       //Task runner
    uglify       = require('gulp-uglify'),        //Minimizies JS
    sass         = require('gulp-ruby-sass'),     //Compiles to CSS
    imagemin     = require('gulp-imagemin'),      // Minimize images
    concat       = require('gulp-concat'),
    concatCss    = require('gulp-concat-css'),
    gutil        = require('gulp-util'),
    autoprefixer = require('gulp-autoprefixer'),
    cssnano      = require('gulp-cssnano'),
    pug          = require('gulp-pug'),
    //htmlmin      = require('gulp-htmlmin'),
    browserSync  = require('browser-sync'),
    reload       = browserSync.reload;

//Error look-out
function errorLog(error){
  console.error.bind(error);
  this.emit('end');
}

// Scripts
gulp.task('scripts', function(){
  gulp.src('./src/js/*.js')
    .pipe(uglify())
    .on('error', errorLog)
    .pipe(concat('main.js'))
    .pipe(gulp.dest('./app/build/js'))
    .pipe(browserSync.stream());
});

/*gulp.task('htmlmin', function() {
  return gulp.src('./*.html')
    .pipe(htmlmin({collapseWhitespace: true}))
    .pipe(gulp.dest('./app'));
});*/

gulp.task('pug', function buildHTML() {
  return gulp.src('./views/*.pug')
  .pipe(pug())
  .pipe(gulp.dest('./app'));
});


var autoprefixerOptions = {
  browsers: ['last 2 versions', '> 5%', 'Firefox ESR']
};

// Styles
gulp.task('styles', function(){
  return sass('./src/sass/**/*.sass',{
    style: 'compressed'
  })
  .on('error', errorLog)
  .pipe(autoprefixer(autoprefixerOptions))
  .pipe(cssnano())
  .pipe(gulp.dest('./app/build/css'))
  .pipe(browserSync.stream())
});


// Images
gulp.task('imagemin', function(){
  gulp.src('./src/images/*/*')
  .pipe(imagemin())
  .pipe(gulp.dest('./app/build/images'));
});

// Static server
gulp.task('browser-sync', function() {

     browserSync.init({
          server: {
                baseDir: "./app"
          }
     });

      gulp.watch('./views/*.pug').on('change', reload);
});


// Watchers
gulp.task('watch', ['browser-sync'], function(){
  gulp.watch('./src/js/*.js', ['scripts']);
  gulp.watch('./src/sass/**/*.sass', ['styles']);
  gulp.watch('./src/images/*/*', ['imagemin']);
  //gulp.watch('./*.html', ['htmlmin']);
  gulp.watch('./views/*.pug', ['pug']);
});


//Run task
gulp.task('default', [
  'browser-sync',
  'scripts',
  //'htmlmin',
  'pug',
  'styles',
  'imagemin',
  'watch'
], browserSync.reload);

Answer 1

更改您的任务并重试:

gulp.task('styles', function(){
  return sass('./src/sass/**/*.sass',{
    style: 'compressed'
  })
  .on('error', errorLog)
  .pipe(autoprefixer(autoprefixerOptions))
  .pipe(browserSync.stream())
  .pipe(cssnano())
  .pipe(gulp.dest('./app/build/css/'))    /*Add '/' at the end of css */
});