javascript - gulp 不运行页面

问题描述

随着一些更新，新项目的大量涌入停止了。重新设计了这个问题的流行答案，但我与其他用户的构建不同。我还没有爬进javascript，好像我不想弄明白，它仍然不起作用。有趣的是，在这些更新之前我使用的项目可以使用这个 gulpfile。顺便说一句，我使用预处理器 SCSS。

const autoPrefixer = require('gulp-autoprefixer');

let project_folder = "dist";
let source_folder = "#src";

let path = {
   build: {
      html: project_folder + "/",
      css: project_folder + "/css/",
      js: project_folder + "/js/",
      img: project_folder + "/img/",
      fonts: project_folder + "/fonts/",
   },
   src: {
      html: [source_folder + "/*.html", "!"+source_folder + "/_*.html"],
      css: [source_folder + "/scss/*.scss", "!"+source_folder + "/_*.scss"],
      js: source_folder + "/js/script.js",
      img: source_folder + "/img/**/*.{jpg,png,svg,gif,ico,webp}",
      fonts: source_folder + "/fonts/*.ttf",
   },
   watch: {
      html: source_folder + "/**/*.html",
      css: source_folder + "/scss/**/*.scss",
      js: source_folder + "/js/**/*.js",
      img: source_folder + "/img/**/*.{jpg,png,svg,gif,ico,webp}"
   },
   clean: "./" + project_folder + "/"
}

let {src,dest} = require('gulp'),
   gulp = require('gulp'),
   browsersync = require('browser-sync').create(),
   fileinclude = require('gulp-file-include'),
   del = require("del"),
   sass = require('gulp-sass')(require('sass')),
   autoprefixer = require("gulp-autoprefixer"),
   group_media = require("gulp-group-css-media-queries"),
   clean_css = require("gulp-clean-css"),
   rename = require("gulp-rename"),
   uglify = require("gulp-uglify-es").default,
   imagemin = require("gulp-imagemin"),
   webp = require("gulp-webp"),
   webphtml = require("gulp-webp-html"),
   webpcss = require("gulp-webpcss"),
   svgSprite = require("gulp-svg-sprite"),
   ttf2woff = require("gulp-ttf2woff"),
   ttf2woff2 = require("gulp-ttf2woff2");

function browserSync(params) {
   browsersync.init({
      server:{
         baseDir: "./" + project_folder + "/"
      },
      port: 3000,
      notify: false
   })
}

function html() {
   return src(path.src.html)
      .pipe(fileinclude())
      .pipe(webphtml())
      .pipe(dest(path.build.html))
      .pipe(browsersync.stream())
}

function js() {
   return src(path.src.js)
      .pipe(fileinclude())
      .pipe(dest(path.build.js))
      .pipe(
         uglify()
      )
      .pipe(
         rename({
            extname: ".min.js"
         })
      )
      .pipe(dest(path.build.js))
      .pipe(browsersync.stream())
}

function css() {
   return src(path.src.css)
      .pipe(
         scss({
            outputStyle: "expanded"
         })
      )

      .pipe(
         group_media()
      )

      .pipe(
         autoprefixer({
            overrideBrowserlist: ["last 5 versions"],
            cascade: true
         })
      )
      .pipe(webpcss())
      .pipe(dest(path.build.css))
      .pipe(clean_css())
      .pipe(
         rename({
            extname: ".min.css"
         })
      )
      .pipe(dest(path.build.css))
      .pipe(browsersync.stream())
}

function images() {
   return src(path.src.img)
   .pipe(
      webp({
         quality: 70
      })
   )
   .pipe(dest(path.build.img))
   .pipe(src(path.src.img))
   .pipe (
      imagemin({
         progressive: true,
         svgoPlugins: [{ removeViewBox: false }],
         interlaced: true,
         optimizationLevel: 3
      })
   )
      .pipe(dest(path.build.img))
      .pipe(browsersync.stream())
}

function fonts(params) {
   src(path.src.fonts)
      .pipe(ttf2woff())
      .pipe(dest(path.build.fonts));
   return src(path.src.fonts)
      .pipe(ttf2woff2())
      .pipe(dest(path.build.fonts));
}

gulp.task('svgSprite', function () {
   return gulp.src([source_folder + '/iconsprite/*.svg'])
   .pipe(svgSprite({
      mode: {
         stack: {
            sprite: "../icons/icons.svg", // sprite file name
            example: true
         }
      },
   }
   ))
})

function watchFiles(params) {
   gulp.watch([path.watch.html], html);
   gulp.watch([path.watch.css], css);
   gulp.watch([path.watch.js], js);
   gulp.watch([path.watch.img], images);
}

function clean(params) {
   return del(path.clean);
}

let build = gulp.series(clean, gulp.parallel(js, css, html, images));
let watch=gulp.parallel(build, watchFiles, browserSync);

exports.fonts = fonts;
exports.images = images;
exports.js = js;
exports.css = css;
exports.html = html;
exports.build = build;
exports.watch = watch;
exports.default = watch;

PS C:\Users\sereg\Desktop\Trigger\#WEB\PROJECTS\practice> gulp
[16:27:27] Using gulpfile ~\Desktop\Trigger\#WEB\PROJECTS\practice\gulpfile.js
[16:27:27] Starting 'default'...
[16:27:27] Starting 'watchFiles'...
[16:27:27] Starting 'browserSync'...
[16:27:27] Starting 'clean'...
[16:27:27] Finished 'clean' after 83 ms
[16:27:27] Starting 'js'...
[16:27:27] Starting 'css'...
[16:27:27] Starting 'html'...
[16:27:27] Starting 'images'...
[16:27:27] 'css' errored after 17 ms
[16:27:27] TypeError: scss is not a function
    at css (C:\Users\sereg\Desktop\Trigger\#WEB\PROJECTS\practice\gulpfile.js:86:10)
    at bound (domain.js:416:15)
    at runBound (domain.js:427:12)
    at asyncRunner (C:\Users\sereg\Desktop\Trigger\#WEB\PROJECTS\practice\node_modules\async-done\index.js:55:18)
    at processTicksAndRejections (internal/process/task_queues.js:77:11)
[16:27:27] 'default' errored after 165 ms
PS C:\Users\sereg\Desktop\Trigger\#WEB\PROJECTS\practice>

谢谢大家的回答，因为我真的花了很多时间和精力）

标签： javascripthtmlcssgulp-sass

javascript - gulp 不运行页面

问题描述

解决方案

推荐阅读