使用gulp时,Css样式表有错误的path

我一直在挣扎一段时间,坦白地说,这是相当令人沮丧的。

问题:

我为我的静态网站创build了一个gulp文件,我所要做的就是使用browserSync,将sass编译为css,并将脚本和css文件缩小。 一切工作正常,排除一件事情:

当我运行“gulp”时,除了位于“CSS /”中的de css文件外,所有的东西都会被加载。 显然服务器认为css文件实际上是(“CSS / style.css /”)文件夹。

控制台错误的屏幕截图: 图像

该css文件位于“css / style.css”

"use strict"; let paths = { script: "js/*.js", minifiedScript: 'script.min.js', cssPath: "css/*.css", productionFolder: "production", sassPath: "scss/*.scss", htmlFiles: "*.html" }; const gulp = require('gulp'); const concat = require('gulp-concat'); const uglify = require('gulp-uglify'); const sourcemaps = require('gulp-sourcemaps'); const del = require('del'); const browserSync = require('browser-sync').create(); const cssMin = require('gulp-css'); const sass = require('gulp-sass'); const inject = require('gulp-inject'); const rename = require("gulp-rename"); gulp.task('browserSync', function() { browserSync.init({ server: { baseDir: "./" } }); }); gulp.task('sass', function () { return gulp.src(paths.sassPath) .pipe(sass().on('error', sass.logError)) .pipe(gulp.dest('./css')) .pipe(browserSync.stream()); }); gulp.task('index', function () { var target = gulp.src('index.html'); // It's not necessary to read the files (will speed up things), we're only after their paths: var sources = gulp.src([paths.script,paths.cssPath], {read: false}); return target.pipe(inject(sources)) .pipe(gulp.dest('')); }); gulp.task('cssMinify', function(){ return gulp.src(paths.cssPath) .pipe(cssMin()) .pipe(gulp.dest(paths.productionFolder + "/minified css")) .pipe(browserSync.stream()); }); gulp.task('clean', function() { // You can use multiple globbing patterns as you would with `gulp.src` return del(['build']); }); gulp.task('scripts', ['clean'], function() { // Minify and copy the JS file return gulp.src(paths.script) .pipe(sourcemaps.init()) .pipe(uglify()) .pipe(concat(paths.minifiedScript)) .pipe(sourcemaps.write()) .pipe(gulp.dest(paths.productionFolder + "/minified JS")); }); gulp.task('jsMinify:watch', function() { gulp.watch(paths.script, ['scripts']) }); gulp.task('sass:watch', function() { gulp.watch(paths.sassPath, ['sass']) }); gulp.task('cssMinify:watch', function() { gulp.watch(paths.cssPath, ['cssMinify']) }); gulp.task('html:watch', function() { gulp.watch(paths.htmlFiles).on('change', browserSync.reload) }); gulp.task('default', ['sass', 'index', 'cssMinify', 'clean', 'html:watch', 'jsMinify:watch', 'sass:watch', 'cssMinify:watch','browserSync', 'scripts']); // DEVELOPMENT