我正在为 gulp 4.0 设置 gulp.js 文件,但我遇到了很多错误。我是 gulp 4.0 的新手,不熟悉新语法。
我尝试了来自不同站点的许多解决方案,但对我没有用。下面是我的 gulp,js 文件代码。请帮我找出任何错误
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var uglify = require('gulp-uglify');
var paths = {
bootstrap: {
src: 'node_modules/bootstrap/scss/bootstrap.scss',
dest: 'src/css'
},
styles:{
src: 'src/scss/*.scss',
dest: 'src/css'
},
bootstrapjs: {
src: 'node_modules/bootstrap/dist/js/bootstrap.min.js',
dest: '/src/js'
},
jquery:{
src:'node_modules/jquery/dist/jquery.min.js',
dest:'/src/js'
},
tether:{
src:'node_modules/tether/dist/js/tether.min.js',
dest:'/src/js'
},
popperjs:{
src: 'node_modules/popper.js/dist/popper.min.js',
dest: '/src/js'
},
custom_scripts:{
src:'/src/scripts/custom_scripts.js',
dest:'/src/js'
},
normalize:{
src:'node_modules/normalize.css/*.css',
dest:'/src/css'
},
fontawesome_css:{
src:'node_modules/font-awesome/css/font-awesome.min.css',
dest:'/src/css'
},
fontawesome_font:{
src:'node_modules/font-awesome/fonts/*',
dest: '/src/fonts'
}
};
//Compiling & Moving Bootstrap Sass File
function bootstrap() {
return gulp
.src(paths.bootstrap.src, {
sourcemaps: true
})
.pipe(sass())
.pipe(autoprefixer())
.pipe(gulp.dest(paths.bootstrap.dest))
.pipe(browsersync.stream());
}
//Compiling & Moving Custom Sass File
function styles() {
return gulp
.src(paths.styles.src, {
sourcemaps: true
})
.pipe(sass())
.pipe(autoprefixer())
.pipe(gulp.dest(paths.styles.dest))
.pipe(browsersync.stream());
}
//Moving Normalize Css
function normalize() {
return gulp
.src(paths.normalize.src, {
sourcemaps: true
})
.pipe(gulp.dest(paths.normalize.dest));
}
//Moving Font Awesome Css
function fontawesome_css() {
return gulp
.src(paths.fontawesome_css.src, {
sourcemaps: true
})
.pipe(gulp.dest(paths.fontawesome_css.dest));
}
//Moving Font Awesome Fonts
function fontawesome_font() {
return gulp
.src(paths.fontawesome_font.src, {
sourcemaps: true
})
.pipe(gulp.dest(paths.fontawesome_font.dest));
}
//Moving Bootstrap Scripts
function bootstrapjs() {
return gulp
.src(paths.bootstrapjs.src, {
sourcemaps: true
})
.pipe(uglify())
.pipe(gulp.dest(paths.bootstrapjs.dest));
}
//Moving Jquery script
function jquery() {
return gulp
.src(paths.jquery.src, {
sourcemaps: true
})
.pipe(uglify())
.pipe(gulp.dest(paths.jquery.dest));
}
//Moving Tether Script
function tether() {
return gulp
.src(paths.tether.src, {
sourcemaps: true
})
.pipe(uglify())
.pipe(gulp.dest(paths.tether.dest));
}
//Moving Popper Js Script
function popperjs() {
return gulp
.src(paths.popperjs.src, {
sourcemaps: true
})
.pipe(uglify())
.pipe(gulp.dest(paths.popperjs.dest));
}
//Minifing Custom custom_scripts
function custom_scripts() {
return gulp
.src(paths.custom_scripts.src, {
sourcemaps: true
})
.pipe(uglify())
.pipe(gulp.dest(paths.custom_scripts.dest))
.pipe(browsersync.stream());;
}
// BrowserSync
function browserSync(done) {
browsersync.init({
server: {
baseDir: "./_site/"
},
port: 3000
});
done();
}
// BrowserSync Reload
function browserSyncReload(done) {
browsersync.reload();
done();
}
function watchFiles() {
gulp.watch(paths.bootstrap.src, bootstrap);
gulp.watch(paths.styles.src, styles);
gulp.watch(paths.custom_scripts.src,custom_scripts);
}
//Run these tasks
const js = gulp.parallel(bootstrapjs, jquery, tether, popperjs);
const style = gulp.parallel(styles, bootstrap, fontawesome_css, normalize, fontawesome_font);
const watch = gulp.parallel(watchFiles, browserSync);
gulp.task(js);
gulp.task(style);
gulp.task(watch);
gulp.task('default', js, style, watches);
预计它会以这种格式工作,因为它适用于许多其他人,但它没有。如果有任何错误,请帮助我。