Gulp import gulpSass from "gulp-sass" Cannot use import statement outside a module
При обновлении зависимостей в package.json столкнулся с проблемой gulp-sass 5
{
"name": "start",
"version": "3.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "gulp",
"type": "module"
},
"author": "BlackStar",
"license": "ISC",
"devDependencies": {
"browser-sync": "^2.26.7",
"changed": "0.0.2",
"del": "^5.1.0",
"gulp": "^3.9.1",
"gulp-autoprefixer": "^6.1.0",
"gulp-changed": "^3.2.0",
"gulp-concat": "^2.6.1",
"gulp-csso": "^4.0.1",
"gulp-ext-replace": "^0.3.0",
"gulp-if": "^3.0.0",
"gulp-imagemin": "^7.1.0",
"gulp-sass": "^5.0.0",
"gulp-uglify": "^3.0.2",
"gulp-useref": "^3.1.3",
"gulp.spritesmith": "^6.11.0",
"imagemin-pngquant": "^8.0.0",
"imagemin-webp": "^6.0.0",
"node-sass": "^6.0.1",
"readable-stream": "^3.6.0"
}
}
gulpfile.js
import gulpSass from "gulp-sass";
import nodeSass from "node-sass";
const gulp = require("gulp"); // gulp core
const sass = gulpSass(nodeSass); // sass compiler
const browserSync = require('browser-sync').create(); // inject code to all devices
const autoprefixer = require('gulp-autoprefixer'); // sets missing browserprefixes
const csso = require('gulp-csso'); // minify the css files
const concat = require('gulp-concat');
const uglify = require('gulp-uglify');
const pipeline = require('readable-stream').pipeline;
const del = require('del');
const gulpif = require('gulp-if');
const useref = require('gulp-useref');
const imagemin = require('gulp-imagemin'),
imageminWebp = require('imagemin-webp'), // webP
extReplace = require("gulp-ext-replace"),
spritesmith = require('gulp.spritesmith');
const changed = require('gulp-changed'),
options = {removeComments: false};
/*********************************************/
/*WATCHER (WATCHING FILE CHANGES)*/
/*********************************************/
function styles() {
return gulp.src('./app/sass/**/*')
.pipe(sass().on('error', sass.logError))
.pipe(autoprefixer({
cascade: false
}))
.pipe(csso())
.pipe(gulp.dest('app/css'))
.pipe(browserSync.stream());
}
function scripts() {
return gulp.src('./app/js/*.js') // get the files
.pipe(browserSync.stream())
// browsersync stream
}
function fonts() {
return gulp.src('./app/fonts/**/*') // get the files
.pipe(gulp.dest('dist/fonts')); // where to put the files
}
/*********************************************/
/*LIBS TASKS (PERSONAL DEVELOPER LIBS)*/
/*********************************************/
function libs() {
return gulp.src('./app/libs/**/*') // get the files
.pipe(gulp.dest('dist/libs')); // where to put the files
}
function extrass () {
return gulp.src([ // get the files
'app/*.html' // except '.html'
]).pipe(gulp.dest('dist')); // where to put the files
}
function buildSprite() {
var spriteData = gulp.src('./app/images/sprite/*.*')
.pipe(spritesmith({
imgName: '../images/sprite.png',
cssName: '_sprite.scss',
cssFormat: 'scss',
padding: 5
}));
spriteData.img.pipe(gulp.dest('./app/images'));
return spriteData.css.pipe(gulp.dest('./app/sass/components'));
}
function sprite(done) {
buildSprite().on('end', done);
}
function images() {
return gulp.src('./app/images/**/*') // get the files
.pipe(imagemin([
imagemin.gifsicle({interlaced: true}),
imagemin.mozjpeg({quality: 75, progressive: true}),
imagemin.optipng({optimizationLevel: 5}),
imagemin.svgo({
plugins: [
{removeViewBox: false},
{cleanupIDs: false}
]
})
]))
.pipe(gulp.dest('dist/images')); // where to put the files
}
gulp.task('webp', () =>
gulp.src('./app/images/**/*.{jpg,png}')
.pipe(imagemin([
imageminWebp({
quality: 85,
preset: 'photo'
})]))
.pipe(extReplace(".webp"))
.pipe(gulp.dest('app/images'))
);
function watch(){
browserSync.init({
server:{
baseDir: "./app/"
}
});
gulp.watch('./app/sass/**/*.scss', styles);
gulp.watch('./app/m.html').on('change', browserSync.reload);
gulp.watch('./app/js/**/*.js').on('change', browserSync.reload);
gulp.watch('./app/images/sprite/*.*').on('change', browserSync.reload);
}
function clean () {
return del(['dist/**', '!dist'])
}
function finished() {
return gulp.src('app/*.html')
.pipe(gulpif('app/*.js', uglify())) // uglify js-files
.pipe(gulpif('app/*.css', csso())) // minify css-files
.pipe(useref())
.pipe(gulp.dest('./dist'));
}
function compress () {
return pipeline(
gulp.src('dist/js/*.js'),
uglify(),
gulp.dest('dist/js')
);
}
gulp.task('extrass', extrass);
gulp.task('styles', styles);
gulp.task('scripts', scripts);
gulp.task('libs', libs);
gulp.task('fonts', fonts);
// gulp.task('stylesReviews', stylesReviews);
gulp.task('sprite', sprite);
gulp.task('images', images);
// gulp.task('webP', webP);
gulp.task('clean', clean);
gulp.task('finished', finished);
gulp.task('compress', compress);
gulp.task('watch', watch);
const standartWatch = gulp.parallel(watch);
gulp.task('default', standartWatch);
gulp.task('build', gulp.series('clean', 'styles', 'scripts', 'images', 'fonts', 'libs', 'extrass', 'finished', 'compress'));
Выдает вот такую ошибку
import gulpSass from "gulp-sass";
^^^^^^
SyntaxError: Cannot use import statement outside a module
at wrapSafe (internal/modules/cjs/loader.js:984:16)
at Module._compile (internal/modules/cjs/loader.js:1032:27)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1097:10)
at Module.load (internal/modules/cjs/loader.js:933:32)
at Function.Module._load (internal/modules/cjs/loader.js:774:14)
Решение проблемы gulp-sass взял из этого источника. Подскажите, пожалуйста как решить проблему с подключением модулей? Пробовал добавить в package.json "type": "module" но это не помогло.