Gulpfile 将 sass 变为 css 开始但不结束

Question

我是 gulp 和 sass 的新手，但我正在尝试创建一个 gulp 文件，它将采用 scss 文件并将其转换为 css 文件（这似乎是很多人做的一件很常见的事情）。我正在学习本教程 - https://youtu.be/nusgoj74a3Y?t=1301 - 但它似乎有点过时了。

我的目录如下所示

-xxx

--gulp文件

--来源

---资产

----scss

-----default.scss

----css

我的 gulp 文件如下所示：

'use strict';

//dependencies
var gulp = require('gulp');
var sass = require('gulp-sass');
var minifyCSS = require('gulp-clean-css');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var changed = require('gulp-changed');


//////////////////
// - SCSS/CSS - //
//////////////////

var SCSS_SRC = './src/Assets/scss/**/*.scss';
var SCSS_DEST = './src/Assets/css';

//compile css
gulp.task('compile_scss', function(){

    gulp.src(SCSS_SRC)
    .pipe(sass().on('error', sass.logError))
    .pipe(minifyCSS())
    .pipe(rename({ suffix: '.min' }))
    .pipe(changed(SCSS_DEST))
    .pipe(gulp.dest(SCSS_DEST));

});

//detect changes in SCSS
gulp.task('watch_scss', function() {
    return gulp.watch(SCSS_SRC, gulp.series('compile_scss'));
});

//run tasks
gulp.task('default', gulp.series('watch_scss'));

当我运行它时，我得到了这个：

[20:39:12] Using gulpfile ~/xxx/xxx/xxx/xxx/gulpfile.js
[20:39:12] Starting 'default'...
[20:39:12] Starting 'watch_scss'...

我相信它应该完成这些任务，而不仅仅是开始它们。

另外我认为应该从 scss 目录中获取 scss 文件，然后将 css 文件放入 css 目录中不行。

任何帮助都会很棒。谢谢。

Answer 1

你在那里触发了一个监视，尝试修改你的任何 scss 文件，然后观察终端转换为 CSS ;)

您也可以添加类似

的内容

gulp.task('getCSS', gulp.series('compile_scss'));

然后运行 gulp getCSS 得到 CSS

Gulpfile 将 sass 变为 css 开始但不结束

Gulpfile to turn sass to css starting but not finishing

css

sass

gulp

gulp-sass