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