0
试图设置吞咽和其中一个步骤令人沮丧。我正在学习一个教程，无法让它正常工作。无法让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，它工作正常。但似乎无法让我的构建任务运行正确，我很难过。
这是更好的答案 - 给@Ramu信贷，但你绝对需要为我所提到的修改runsequence通话 - 而没有改变一些或大多数时间它可能工作，但它会随机如果你失败了保持原样。 – Mark
Omg谢谢你们两位的帮助！感谢Mark对运行顺序的改变，并感谢@ Ramu-Achala的全面解释！我试图弄清楚为什么这种方式行不通。 – grimesd