Question

尝试设置gulp并且其中一个步骤令人沮丧。我正在按照教程进行操作，无法使其正常工作。

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

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

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

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

现在这是我的Gulpfile.js

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

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

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

moment(data_from_db).format("D-MM-YYYY HH:mm")

当我运行gulp build：prod时，这就是它在styles.min.css中的输出

$.each(finalData, function(index, value) {
    dataForum += '<div>';
    dataForum += '<div class="media-body"><span class="date-post pull-right"><i class="fa-clock-o"></i>  posted at '+moment(value.createdAt).format("D-MM-YYYY HH:mm")+'</span>';
    dataForum += '</div>';
});

这些文件最小化但我无法在使用构建任务时正确运行并编译。

^^^正如您所看到的，它不是创建文件然后连接文件，而是创建2个文件。我先尝试让gulp sass文件，然后让useref将文件移动到公共文件夹并将其重命名为styles.min.css

我似乎在某处丢失了某些东西，或者没有找到/命名到正确的文件夹？

如果我运行gulp sass：prod，它运行正常。但似乎无法使我的构建任务正常运行我感到难过。

Answer 1

来自运行序列documentatin：

通过为一个或多个参数提供一组任务名称，您仍然可以并行运行某些任务。

所以，在你的任务数组中：

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

这些任务并行运行。无法保证＆＃39; sass：prod＆＃39;任务将在＆lt; useref：prod＆＃39;之前完成。任务。如果您希望将其更改为：

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

Answer 2

从您提到的文章中

Gulp-useref将任意数量的CSS和JavaScript文件连接成一个单个文件，查找以“”开头的注释。它的语法是：

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

此处的路径是指生成的文件的目标路径。

根据您指定以下内容的文件。

<!--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 dest path ，如下所示。

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以我想要的方式行事，错过一些东西吗？

2 个答案: