Gulp构建任务CSS路径和JS编译

Question

所以我在我的所有项目中都使用了以下基本项目结构：

src 文件夹的位置如下：

我使用Pug（Jade），sass编译和useref js编译。

这是我的Jade视图结构：

这是我的Jade索引文件：

这是我的Jade脚本文件，它包含在索引中：

这是我的预构建索引文件，由index.pug构建：

这是索引文件的构建版本：

我的Gulpfile看起来像这样：

＆＃13;

＆＃13;

var gulp = require('gulp'),
	sass = require('gulp-sass'),
	plumber = require('gulp-plumber'),
	changed = require('gulp-changed'),
	gutil = require('gulp-util'),
	pug = require('gulp-pug'),
	concat = require('gulp-concat'),
	browserSync = require('browser-sync').create(),
	useref = require('gulp-useref'),
	uglify = require('gulp-uglify'),
	gulpIf = require('gulp-if'),
	cssnano = require('gulp-cssnano'),
	imagemin = require('gulp-imagemin'),
	cache = require('gulp-cache'),
	del = require('del'),
	cssAdjustUrlPath = require('gulp-css-adjust-url-path'),
	runSequence = require('run-sequence');

function handleError(err) {
	gutil.beep();
	console.log(err.toString());
	this.emit('end');
}

gulp.task('sass', function () {
	return gulp.src('src/scss/**/*.scss')
		.pipe(plumber({
			errorHandler: handleError
		}))
		.pipe(sass()) // Using gulp-sass
		.pipe(gulp.dest('src/css'))
		.pipe(browserSync.reload({
			stream: true
		}));
});

gulp.task('sass-dist', function () {
	return gulp.src('src/scss/**/*.scss')
		.pipe(cssAdjustUrlPath(/(url\(['"]?)[/]?(assets)/g))
		.pipe(sass()) // Using gulp-sass
		.pipe(gulp.dest('dist/css'))
});

gulp.task('views', function buildHTML() {
	return gulp.src('src/views/*.pug')
		.pipe(changed('src', {
			extension: '.html'
		}))
		.pipe(pug({
			pretty: true
		}))
		.pipe(gulp.dest('src/'))
});

gulp.task('views-dist', function buildHTML() {
	return gulp.src('src/views/*.pug')
		.pipe(changed('src', {
			extension: '.html'
		}))
		.pipe(pug({
			pretty: true
		}))
		.pipe(gulp.dest('dist/'))
});

gulp.task('watch', ['browserSync', 'views', 'sass'], function () {
	gulp.watch('src/scss/**/*.scss', ['sass']);
	gulp.watch('src/views/**/*.pug', ['views']);
	// Reloads the browser whenever HTML or JS files change
	gulp.watch('src/js/**/*.js', browserSync.reload);
	gulp.watch('src/*.html', browserSync.reload);
});

gulp.task('browserSync', function () {
	browserSync.init({
		server: {
			baseDir: 'src'
		},
		port: 3000
	});
});

gulp.task('useref', function () {
	return gulp.src('src/*.html')
		.pipe(useref())
		.pipe(gulpIf('*.js', uglify()))
		// Minifies only if it's a CSS file
		.pipe(gulpIf('*.css', cssnano()))
		.pipe(gulp.dest('dist'));
});

gulp.task('useref-dist', function () {
	return gulp.src('src/**/*.html')
		.pipe(useref())
		.pipe(gulpIf('*.js', uglify()))
		// Minifies only if it's a CSS file
		.pipe(gulpIf('*.css', cssnano()))
		.pipe(gulp.dest('dist'));
});


gulp.task('images', function () {
	return gulp.src('src/images/**/*.+(png|jpg|jpeg|gif|svg)')
		// Caching images that ran through imagemin
		.pipe(cache(imagemin({
			interlaced: true
		})))
		.pipe(gulp.dest('src/images/'));
});

gulp.task('images-dist', function () {
	return gulp.src('src/images/**/*.+(png|jpg|jpeg|gif|svg)')
		// Caching images that ran through imagemin
		.pipe(cache(imagemin({
			interlaced: true
		})))
		.pipe(gulp.dest('dist/images/'));
});

gulp.task('fonts', function () {
	return gulp.src('src/fonts/**/*')
		.pipe(gulp.dest('dist/fonts'));
});

gulp.task('clean:dist', function () {
	return del.sync('dist');
});

gulp.task('build', function (callback) {
	runSequence('clean:dist', ['sass-dist', 'useref-dist', 'images-dist', 'fonts', 'views-dist'],
		callback
	);
});

gulp.task('default', function (callback) {
	runSequence(['views', 'sass', 'browserSync', 'watch'],
		callback
	);
});

＆＃13;

＆＃13;

＆＃13;

当我运行构建任务gulp build时，除了输出的CSS文件中的相对/绝对路径 以及运行最终产品的JS之外，一切都很好，而字体/背景/图标和JS功能未转换为最终版本。

我的Gulp文件有什么问题，我该如何解决？