0

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

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

基本上，我想创建一个编译 sass、连接 css 文件、最小化它并将其输出到公用文件夹的构建任务。这是我的 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 名称 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 个文件。我试图先让 gulp sass 文件，然后让 useref 将文件移动到公用文件夹并将其重命名为 styles.min.css

看来我在某处遗漏了一些东西，或者没有采购/目的地到正确的文件夹？

如果我运行 gulp sass:prod，它可以正常工作。但似乎无法让我的构建任务正确运行，我很难过。

4

2 回答 2

1

从运行序列文档中：

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

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

['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
    )
})
于 2017-07-25T05:22:01.990 回答
1

从你提到的文章中，

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

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

这里的path是指生成文件的目标路径。

根据您指定的文件，如下。

<!--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 路径，如下所示。

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
        )
})
于 2017-07-25T05:55:17.263 回答