gulp 看不编译 sass 到 css

Question

我是使用 gulp 的初学者，我尝试使用 gulp sass 和 gulp watch 来编译我的 sass 文件，但是在运行ning gulp watch 命令

之后没有创建 css 文件

gulpfile.js

// Include gulp
var gulp = require('gulp');

// Include Our Plugins
var jshint = require('gulp-jshint');
var sass = require('gulp-sass');
var watch = require('gulp-watch');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var sourcemaps = require('gulp-sourcemaps');

//gulp.task('default', function () {
//    // place code for your default task here
//});
gulp.task('default', ['sass', 'watch']);


gulp.task('sass', function () {
  return gulp.src('./sass/*.scss')
    .pipe(sass.sync().on('error', sass.logError))
    .pipe(gulp.dest('./css'));
});

gulp.task('sass', function () {
 return gulp.src('./sass/*.scss')
  .pipe(sourcemaps.init())
  .pipe(sass().on('error', sass.logError))
  .pipe(sourcemaps.write('./maps'))
  .pipe(gulp.dest('./css'));
});

// Watch Files For Changes
gulp.task('watch', function() {
    gulp.watch('./sass/*.scss', ['sass']);
});

项目层次结构

myProject
     |_ public_html
     |    |_ css
     |    |_ sass
     |    |_ js
     |    |_ index.html
     |_ node_modules
     |_ gulpfile.js
     |_ package.json

当我运行 gulp

[21:37:26] Starting 'sass'...
[21:37:26] Starting 'watch'...
[21:37:26] Finished 'watch' after 7.01 ms
[21:37:26] Finished 'sass' after 29 ms
[21:37:26] Starting 'default'...
[21:37:26] Finished 'default' after 7.11 ?s

Answer 1

看来你的文件路径有误。

而不是./sass/*.scss

尝试

public_html/sass/*.scss/

注意 ./ 指的是当前工作字典。

Answer 2

您有两个任务都称为 sass 尝试删除第一个，因为您并不真正需要它。在你的路径开头有 ./ 实际上不是很好的做法，也尝试删除它们。

您还缺少回调，所以试试这个。

gulp.task('sass', function (cb) {
 return gulp.src('sass/*.scss')
   .pipe(sourcemaps.init())
   .pipe(sass().on('error', sass.logError))
   .pipe(sourcemaps.write('maps'))
   .pipe(gulp.dest('css'), cb());
});

gulp 看不编译 sass 到 css

gulp watch not compile sass to css

css

sass

watch

gulp