无法让 GulpFile 以我想要的方式运行，丢失了什么？

Question

尝试设置 gulp，其中一个步骤令人沮丧。我正在学习教程，但无法正常工作。

https://css-tricks.com/gulp-for-beginners/

基本上，我想创建一个构建任务来编译 sass，连接 css 文件，将其最小化，并将其输出到 public 文件夹。这是我 index.html 的代码。（简体）。

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--build:css css/styles.min.css -->
    <link rel="stylesheet" href="scss/styles.scss">
    <!-- endbuild -->
</head>

<body>

</body>

</html>

现在这是我的 Gulpfile.js

var gulp = require('gulp'),
    sass = require('gulp-sass'),
    useref = require('gulp-useref'), // Use to concatenate files
    gulpIf = require('gulp-if'),
    cssnano = require('gulp-cssnano'),
    uglify = require('gulp-uglify'),
    imagemin = require('gulp-imagemin'),
    imagecache = require('gulp-cache'),
    del = require('del'),
    runsequence = require('run-sequence');


/* ********************************* */
// PRODUCTION TASKS ONLY \


/*Used to start with a clean slate on the public folder */
gulp.task('clean:public', function () { 
    return del.sync('public');
})

gulp.task('watch:prod', function () {
    gulp.watch('src/scss/**/*.scss', ['sass']);
});

gulp.task('sass:prod', function () {
    return gulp.src('src/scss/**/*.scss')
        .pipe(sass())
        .pipe(gulp.dest('public/css'))
});

gulp.task('useref:prod', function () {
    return gulp.src('src/*.html')
        .pipe(useref())
        .pipe(gulpIf('*.js', uglify()))
        .pipe(gulpIf('*.css', cssnano()))
        .pipe(gulp.dest('public'));
});

gulp.task('images:prod', function () {
    return gulp.src('src/images/**/*.+(png|jpg|gif|svg)')
    .pipe(imagecache(imagemin([
    imagemin.gifsicle({interlaced: true}),
    imagemin.jpegtran({progressive: true}),
    imagemin.optipng({optimizationLevel: 5}),
    imagemin.svgo({plugins: [{removeViewBox: true}]})
])))
    .pipe(gulp.dest('public/images'));
});

gulp.task('cssimages:prod', function () {
    return gulp.src('src/css/cssimages/**/*.+(png|jpg|gif|svg)')
    .pipe(imagecache(imagemin([
    imagemin.gifsicle({interlaced: true}),
    imagemin.jpegtran({progressive: true}),
    imagemin.optipng({optimizationLevel: 5}),
    imagemin.svgo({plugins: [{removeViewBox: true}]})
])))
    .pipe(gulp.dest('public/css/cssimages'));
});

/* BRING EVERYTHING TOGETHER */

gulp.task('build:prod', function (callback){
    runsequence
        (
            'clean:public',
            ['sass:prod','useref:prod','images:prod', 'cssimages:prod'], 
            callback
        )
})

根据教程，这应该会在 css 名称下的 public 文件夹中创建一个文件 styles.min.css

这个文件应该也已经从 sass 编译下来了。我做了一个例子 styles.scss 里面有我。

$bgcolor : yellow;
body {
    background: $bgcolor;
}

div {
    width: 100px;
    height: 20px;
}

当我运行 gulp build:prod 时，这就是它在 styles.min.css

中输出的内容

$bgcolor:#ff0;body{background:$bgcolor}div{width:100px;height:20px}

文件最小化很好，但我无法正确获取 sass 部分运行并在使用构建任务时进行编译。

^^^ 如您所见，它创建了 2 个文件，而不是 sassing 文件然后连接文件。我试图先 gulp sass 文件，然后让 useref 将文件移动到 public 文件夹并将其重命名为 styles.min.css

似乎我在某处遗漏了某些东西 sourcing/destinating 到正确的文件夹？

如果我运行gulpsass:prod，它工作正常。但是似乎无法将我的构建任务设置为运行，我很困惑。

Answer 1

来自运行-序列 documentatin :

You can still run some of the tasks in parallel, by providing an array of task names for one or more of the arguments.

因此，在您的任务数组中：

['sass:prod','useref:prod','images:prod', 'cssimages:prod'],

这些任务运行并行进行。无法保证 'sass:prod' 任务会在 'useref:prod' 任务之前完成。如果您希望发生这种情况，请更改为：

gulp.task('build:prod', function (callback){
runsequence
    (
        'clean:public',
        'sass:prod',
        ['useref:prod','images:prod', 'cssimages:prod'], 
        callback
    )
})

Answer 2

从您提到的文章中，

Gulp-useref concatenates any number of CSS and JavaScript files into a single file by looking for a comment that starts with "". Its syntax is:

<!-- build:<type> <path> --> ... HTML Markup, list of script / link tags. <!-- endbuild -->

path here refers to the target path of the generated file.

根据文档，您指定了以下内容。

<!--build:css css/styles.min.css -->
    <link rel="stylesheet" href="scss/styles.scss">
<!-- endbuild -->

因此 useref 将从 styles.scss 复制样式并创建 styles.min.css 并粘贴 scss 样式。这就是你在缩小 styles.min.css

中获得 scss 样式的原因

要实现您想要的效果，您必须修改 sass:prod 目标路径 ，如下所示。

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

并且在 html 中，您必须引用 css 文件。

<!--build:css css/styles.min.css -->
   <link rel="stylesheet" href="css/styles.css">
<!-- endbuild -->

而且正如 @Mark 所指定的，最好修改运行序列以确保 sass:prod 任务在useref:prod任务。

gulp.task('build:prod', function (callback){
    runsequence
        (
            'clean:public','sass:prod',
            ['useref:prod','images:prod', 'cssimages:prod'], 
            callback
        )
})

无法让 GulpFile 以我想要的方式运行，丢失了什么？

Can't get GulpFile to act the way I want, missing something?

css

gulp

gulp-sass

gulp-useref