我是gulp的新手,目前在一个自由项目上工作,在那里给我预先编写的gulpfile.js,并要求在项目上使用它。我习惯于使用webpack模块轻松导入/导出JS文件,在这里我不明白如何将一个JS文件链接到另一个。
我已经尝试将browserify添加到捆绑文件中,但是当我尝试将browserify(main.js)添加到gulpfile.js脚本任务中时,出现下一个错误:“ browserify()不是函数”。 当我没有运行gulp dev时,出现“ ReferenceError:未定义require”。
我的项目大纲: -js(文件夹)> main.js,rooms.js,main.min.js; -模板(文件夹)> rooms.json;
我正在尝试使用以下方法将rooms.json和rooms.js导入main.js
var rooms = require('../templates/rooms.json');
我的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"
}
}```