Question

我已从此tutorial下载了针对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，你可能会猜到。我已经阅读了this但是......）

更新：我实际上并没有替换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/'));
});

使用Gulp任务替换Less的默认任务

1 个答案: