Я новичок в gulp, в настоящее время работаю над проектом фрилансера, где мне дали заранее написанный gulpfile.js и попросили использовать его в проекте. Я привык упаковать модули, в которые легко импортировать и экспортировать JS-файлы, здесь я не понимаю, как связать один JS-файл с другим.
Я уже пытался добавить browserify для комплектации файловвместе, но когда я попытался добавить browserify (main.js) в задачу сценария gulpfile.js, я получил следующую ошибку: «browserify () не является функцией». Когда я запускаю gulp dev без использования, я получаю «ReferenceError: require is notfined».
схема моего проекта: - js (папка)> main.js, rooms.js, main. min.js;- шаблоны (папка)> rooms.json;
Я пытаюсь импортировать rooms.json и rooms.js в main.js, используя var rooms = require('../templates/rooms.json');
My gulpfile.js
sass = require('gulp-sass'),
browserSync = require('browser-sync').create(),
autoprefixer = require('gulp-autoprefixer'),
rename = require('gulp-rename'),
svgmin = require('gulp-svgmin'),
svgstore = require('gulp-svgstore'),
cheerio = require('gulp-cheerio'),
webp = require('gulp-webp'),
imagemin = require('gulp-imagemin'),
imageminPngquant = require('imagemin-pngquant'),
imageminMozjpeg = require('imagemin-mozjpeg'),
cssnano = require('gulp-cssnano'),
uglify = require('gulp-uglify'),
babel = require('gulp-babel');
// Development Tasks
// -----------------
// Start browserSync server
gulp.task('browserSync', function () {
browserSync.init({
server: {
baseDir: '.'
},
notify: false
});
gulp.watch('./scss/**/**/*.scss', gulp.parallel('sass'));
gulp.watch('./*.html').on('change', browserSync.reload);
gulp.watch('./js/**/main.js', gulp.parallel('scripts'));
});
gulp.task('sass', function () {
return gulp
.src('./scss/style.scss')
.pipe(sass().on('error', sass.logError))
.pipe(
autoprefixer({
browsers: ['last 2 versions'],
cascade: false
})
)
.pipe(gulp.dest('./css'))
.pipe(cssnano())
.pipe(rename('style.min.css'))
.pipe(gulp.dest('./css'))
.pipe(browserSync.stream());
});
gulp.task('scripts', function () {
return gulp
.src('./js/main.js')
.pipe(rename('main.min.js'))
.pipe(babel({ presets: ['@babel/env'] }))
.pipe(uglify())
.pipe(gulp.dest('js/'))
.pipe(browserSync.stream());
});
// Watchers
gulp.task('watch', gulp.series('sass', 'browserSync'));
// Optimization Tasks
gulp.task('webp', () =>
gulp
.src('./img/hero_*.{jpg,png}')
.pipe(webp())
.pipe(gulp.dest('./img/'))
);
gulp.task('imagemin', () =>
gulp
.src('img/*.{jpg,png}')
.pipe(
imagemin(
[
(imageminPngquant({
speed: 1,
quality: 98 //lossy settings
}),
imageminMozjpeg({
quality: 90
}))
],
{
verbose: true
}
)
)
.pipe(gulp.dest('img/'))
);
// Sprites
gulp.task('sprite', function () {
return gulp
.src('./img/icon-*.svg')
.pipe(svgmin())
.pipe(svgstore({ inlineSvg: true }))
.pipe(
cheerio({
run: function ($) {
$('[fill]').removeAttr('fill');
$('svg').attr('style', 'display:none');
},
parserOptions: { xmlMode: true }
})
)
.pipe(rename('sprite.svg'))
.pipe(gulp.dest('./img/'));
});
gulp.task(
'dev',
gulp.series(
gulp.parallel('sass', 'scripts', 'webp', 'imagemin', 'sprite'),
'browserSync'
)
);
Package.json
"name": "project",
"version": "1.0.0",
"description": "",
"main": "gulpfile.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.3.4",
"@babel/preset-env": "^7.7.1",
"browser-sync": "^2.26.3",
"cheerio": "^1.0.0-rc.2",
"del": "^2.2.2",
"gulp": "^4.0.2",
"gulp-autoprefixer": "^6.0.0",
"gulp-babel": "^8.0.0",
"gulp-cheerio": "^0.6.3",
"gulp-concat": "^2.6.1",
"gulp-cssnano": "^2.1.3",
"gulp-declare": "^0.3.0",
"gulp-gh-pages": "^0.5.4",
"gulp-imagemin": "^4.1.0",
"gulp-rename": "^1.4.0",
"gulp-sass": "^3.2.1",
"gulp-svgmin": "^1.2.3",
"gulp-svgstore": "^6.1.0",
"gulp-uglify": "^3.0.2",
"gulp-webp": "^3.0.0",
"gulp-wrap": "^0.15.0"
},
"dependencies": {
"gulp-browserify": "^0.5.1",
"gulp-cli": "^2.2.0",
"imagemin-mozjpeg": "^8.0.0",
"imagemin-pngquant": "^7.0.0",
"tunnel-agent": "^0.6.0",
"vinyl-source-stream": "^2.0.0"
}
}```