Question

这是我第一次使用Gulp，而我将失去理智。我以为我非常仔细地遵循了演练，但是似乎没有我的SASS文件都可以像我想要的那样编译到dist文件夹中。我在浏览器中也看到一个错误：

```
(index):1 Refused to apply style from 'http://localhost:3000/normalize.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

(index):1 Refused to apply style from 'http://localhost:3000/dist/css/global_styles.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

(index):1 Refused to apply style from 'http://localhost:3000/dist/css/index.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

(index):1 Refused to apply style from 'http://localhost:3000/normalize.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

(index):1 Refused to apply style from 'http://localhost:3000/dist/css/global_styles.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

(index):1 Refused to apply style from 'http://localhost:3000/dist/css/index.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.```

我的文件夹结构如下：

widgetsPage
  app
    js
      games.js
      in_the_works.js
      index.js
      mobile.js
      puzzle.js
      trivia.js
    scss
      games.scss
      global_styles.scss
      in_the_works.scss
      index.scss
      mobile.scss
      puzzle.scss
      trivia.scss
      weather.scss
    games.html
    in_the_works.html
    mobile.html
    normalize.css
    puzzle.html
    trivia.html
    weather.html
  dist
  Images
  node_modules
  gulpfile.js
  index.html
  package-lock.json
  package.json

这是我使用的gulpfile.js：

    var gulp = require("gulp"),
    sass = require("gulp-sass"),
    postcss = require("gulp-postcss"),
    autoprefixer = require("autoprefixer"),
    cssnano = require("cssnano"),
    sourcemaps = require("gulp-sourcemaps"),
    browserSync = require("browser-sync").create();

var paths = {
    styles: {
        // By using styles/**/*.sass we're telling gulp to check all folders for any sass file
        src: "app/scss/*.scss",
        // Compiled files will end up in whichever folder it's found in (partials are not compiled)
        dest: "../../dist/css"
    }

    // Easily add additional paths
    // ,html: {
    //  src: '...',
    //  dest: '...'
    // }
};

function style() {
    return gulp
        .src(paths.styles.src)
        // Initialize sourcemaps before compilation starts
        .pipe(sourcemaps.init())
        .pipe(sass())
        .on("error", sass.logError)
        // Use postcss with autoprefixer and compress the compiled file using cssnano
        .pipe(postcss([autoprefixer(), cssnano()]))
        // Now add/write the sourcemaps
        .pipe(sourcemaps.write())
        .pipe(gulp.dest(paths.styles.dest))
        // Add browsersync stream pipe after compilation
        .pipe(browserSync.stream());
}




// A simple task to reload the page
function reload() {
    browserSync.reload();
}

// Add browsersync initialization at the start of the watch task
function watch() {
    browserSync.init({
        // You can tell browserSync to use this directory and serve it as a mini-server
        server: {
            // baseDir: "./src"
            proxy: "localhost"
        }
        // If you are already serving your website locally using something like apache
        // You can use the proxy setting to proxy that instead
        // proxy: "yourlocal.dev"
    });
    gulp.watch(paths.styles.src, style);
    // We should tell gulp which files to watch to trigger the reload
    // This can be html or whatever you're using to develop your website
    // Note -- you can obviously add the path to the Paths object
    //gulp.watch("src/*.html", reload);
    gulp.watch("app/*.html").on('change', browserSync.reload);
}

// We don't have to expose the reload function
// It's currently only useful in other functions


// Don't forget to expose the task!
exports.watch = watch

// Expose the task by exporting it
// This allows you to run it from the commandline using
// $ gulp style
exports.style = style;

/*
 * Specify if tasks run in series or parallel using `gulp.series` and `gulp.parallel`
 */
var build = gulp.parallel(style, watch);

/*
 * You can still use `gulp.task` to expose tasks
 */
//gulp.task('build', build);

/*
 * Define default task that can be called by just running `gulp` from cli
 */

非常感谢您提供的所有帮助，如果需要提供更多信息，请告诉我。

Gulp新手：文件未编译到dist文件夹

0 个答案: