0

With some update, the gulp from new projects stopped starting. Reworked the popular answers to this question, but my build with other users is different. I haven’t climbed into the javascript yet, and as if I didn’t want to figure it out, it still doesn’t work. It is interesting that the project with which I worked before these updates works with this gulpfile. By the way, I use the preprocessor 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> 

Thank you all for your answer, because I really spent a lot of time and nerves on it)

1 Answer 1

0

You wrote .pipe(scss({}) in function css(), change it to .pipe(src({})

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.