将Less的默认任务替换为Gulp任务

Question

我已经从本教程中下载了PhoneGap的AngularJS设置。

现在我想使用Sass而不是Less(因为这是我在移植到PhoneGap的项目中使用的)。默认的Less任务如下所示:

gulp.task('less', function () {
  return gulp.src(config.less.src).pipe(less({
    paths: config.less.paths.map(function(p){
      return path.resolve(__dirname, p);
    })
  }))
  .pipe(mobilizer('app.css', {
    'app.css': {
      hover: 'exclude',
      screens: ['0px']
    },
    'hover.css': {
      hover: 'only',
      screens: ['0px']
    }
  }))
  .pipe(cssmin())
  .pipe(rename({suffix: '.min'}))
  .pipe(gulp.dest(path.join(config.dest, 'css')));
});

我已经为Sass尝试了这个Gulp任务:

gulp.task('sass', function(){
  return gulp.src('./src/sass/css/main.scss')
  .pipe(sass()) // Using gulp-sass
  .pipe(gulp.dest('./src/css/'));
});

似乎没有发生任何事情(无法看到新生成的main.scss文件)。有人可以帮助(我没有使用Gulp之前，你可能会猜到。我已经通读过了…)

更新:我实际上并没有替换Less任务，我只是为Sass添加了另一个任务。

更新2:我在这里调用Sass任务

gulp.task('watch', function () {
  if(typeof config.server === 'object') {
    gulp.watch([config.dest + '/**/*'], ['livereload']);
  }
  gulp.watch(['./src/html/**/*'], ['html']);
  gulp.watch(['./src/sass/css/*'], ['sass']);
  gulp.watch(['./src/js/**/*', './src/templates/**/*', config.vendor.js], ['js']);
  gulp.watch(['./src/images/**/*'], ['images']);
});

然而，问题似乎是它没有被执行。

更新3:下面是构建阶段代码

gulp.task('build', function(done) {
  var tasks = ['html', 'fonts', 'images', 'sass', 'js'];
  seq('clean', tasks, done);
});

Answer 1

您的路径是绝对的，而不是相对的。别忘了点;)

gulp.task('sass', function(){
    return gulp.src('./src/sass/css/main.scss')
        .pipe(sass())
        .pipe(gulp.dest('./src/css/'));
});