无法让GulpFile按照我想要的方式行事，错过了什么？

问题描述：

试图设置吞咽和其中一个步骤令人沮丧。我正在学习一个教程，无法让它正常工作。无法让GulpFile按照我想要的方式行事，错过了什么？

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

基本上，我想创建一个构建任务，编译青菜，concats的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; 
}

当我运行一饮而尽构建：督促，这是它在styles.min.css输出

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

减少罚款的文件，但我不能让萨斯部分运行的权利和编译当使用构建任务。

^^^正如你看到的，而不是sassing文件，然后连接文件，它创建两个文件。我试图让第一个文件流氓文件，然后有useref移动该文件到公用文件夹，并将其重命名为styles.min.css

看来我失去了某个地方或没有采购/ destinating正确的文件夹？

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

答

从你提到的文章，

咕嘟咕嘟-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样式。这就是你在缩小风格中获得scss风格的原因.min.css

要实现你想要的，你必须修改你的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 -->

而且还通过@马克规定，最好是修改运行程序，以确保该SASS：PROD任务：督促任务useref之前完成。

这是更好的答案 - 给@Ramu信贷，但你绝对需要为我所提到的修改runsequence通话 - 而没有改变一些或大多数时间它可能工作，但它会随机如果你失败了保持原样。 – Mark

Omg谢谢你们两位的帮助！感谢Mark对运行顺序的改变，并感谢@ Ramu-Achala的全面解释！我试图弄清楚为什么这种方式行不通。 – grimesd

答

从运行序列documentatin：

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

所以，在你的任务数组：

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

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

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

无法让GulpFile按照我想要的方式行事，错过了什么？

相关推荐