我正在使用gulp做一系列工作,但某种原因它没有输出CSS图片。这里是代码:
var
source = 'source/',
dest = 'build/',
html = {
in: source + '*.html',
watch: [source + '*.html', source + 'template/**/*'],
out: dest,
context: {
devBuild: devBuild,
author: pkg.author,
version: pkg.version
}
},
images = {
in: source + 'images/*.*',
out: dest + 'images/'
},
imguri = {
in: source + 'images/inline/*',
out: source + 'scss/images/',
filename: '_datauri.scss',
namespace: 'img'
},
css = {
in: source + 'scss/main.scss',
watch: [source + 'scss/**/*', '!' + imguri.out + imguri.filename],
out: dest + 'css/',
sassOpts: {
outputStyle: 'nested',
imagePath: '../images',
precision: 3,
errLogToConsole: true
},
pleeeaseOpts: {
autoprefixer: { browsers: ['last 2 versions', '> 2%'] },
rem: ['16px'],
pseudoElements: true,
mqpacker: true,
minifier: !devBuild
}
},
fonts = {
in: source + 'fonts/*.*',
out: css.out + 'fonts/'
},
js = {
in: source + 'js/**/*',
out: dest + 'js/',
filename: 'main.js'
},
syncOpts = {
server: {
baseDir: dest,
index: 'index.html'
},
open: false,
notify: true
};
console.log(pkg.name + ' ' + pkg.version + ', ' + (devBuild ? 'development' : 'production') + ' build');
gulp.task('clean', function() {
del([
dest + '*'
]);
});
gulp.task('html', function() {
var page = gulp.src(html.in).pipe(preprocess({ context: html.context }));
if (!devBuild) {
page = page
.pipe(size({ title: 'HTML in' }))
.pipe(htmlclean())
.pipe(size({ title: 'HTML out' }));
}
return page.pipe(gulp.dest(html.out));
});
gulp.task('images', function() {
return gulp.src(images.in)
.pipe(newer(images.out))
.pipe(imagemin())
.pipe(gulp.dest(images.out));
});
gulp.task('imguri', function() {
return gulp.src(imguri.in)
.pipe(imagemin())
.pipe(imacss(imguri.filename, imguri.namespace))
.pipe(gulp.dest(imguri.out));
});
gulp.task('fonts', function() {
return gulp.src(fonts.in)
.pipe(newer(fonts.out))
.pipe(gulp.dest(fonts.out));
});
gulp.task('sass', ['imguri'], function() {
return gulp.src(css.in)
.pipe(sass(css.sassOpts))
.pipe(size({title: 'CSS in '}))
.pipe(pleeease(css.pleeeaseOpts))
.pipe(size({title: 'CSS out '}))
.pipe(gulp.dest(css.out))
.pipe(browserSync.reload({ stream: true }));
});
gulp.task('js', function() {
if (devBuild) {
return gulp.src(js.in)
.pipe(newer(js.out))
.pipe(jshint())
.pipe(jshint.reporter('default'))
.pipe(jshint.reporter('fail'))
.pipe(gulp.dest(js.out));
}
else {
del([
dest + 'js/*'
]);
return gulp.src(js.in)
.pipe(deporder())
.pipe(concat(js.filename))
.pipe(size({ title: 'JS in '}))
.pipe(stripdebug())
.pipe(uglify())
.pipe(size({ title: 'JS out '}))
.pipe(gulp.dest(js.out));
}
});
gulp.task('browserSync', function(){
browserSync.init({
server:{
baseDir: "build/"
},
})
});
gulp.task('default', ['html', 'images', 'fonts', 'sass', 'js', 'browserSync'], function() {
gulp.watch(html.watch, ['html', browserSync.reload]);
gulp.watch(images.in, ['images']);
gulp.watch(fonts.in, ['fonts']);
gulp.watch([css.watch, imguri.in], ['sass']);
gulp.watch(js.in, ['js', browserSync.reload]);
});
这是 CSS 代码:
#features {
width: 100%;
padding: 5vh 5vw;
background: $color-dark image-url("3.jpg") 50% 50% no-repeat;
background-size: cover;
我认为这与文件夹/文件位置有关。