Question

我正在为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);

它应该以这种格式工作，因为它适用于许多其他人，但没有。如果有任何错误，请帮助我。

Answer 1

两天后，我了解了gulp 4的工作语法和新语法。以下是gulp文件的完整代码。现在可以正常使用了。

var developer = 'Ali',
    company   = 'FL Developers';

//Importing dependencies
var gulp = require ('gulp'),
    autoprefixer = require('gulp-autoprefixer'),
    browserSync = require('browser-sync').create(),
    sass = require('gulp-sass'),
    cleanCSS = require('gulp-clean-css'),
    sourcemaps = require('gulp-sourcemaps'),
    concat = require('gulp-concat'),
    imagemin = require('gulp-imagemin'),
    changed = require('gulp-changed'),
    uglify = require('gulp-uglify'),
    lineec = require('gulp-line-ending-corrector');

// BrowserSync
function serve(done) {
  browserSync.init({
    server: {
      baseDir: "./src/"
    },
    port: 3000
  });
  done();
}

// BrowserSync Reload
function reload(done) {
  browserSync.reload();
  done();
}

//Declaring Paths
var paths = {
    styles:{
      src:'./src/scss/*.scss',
      dest: './src/css/'
    },
    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'
    },
    bootstrap_css:{
      src:'node_modules/bootstrap/scss/bootstrap.scss',
      dest:'./src/css/'
    },
    bootstrap_js:{
      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_js:{
      src:'./src/scripts/*.js',
      dest:'./src/js'
    }
}

//Compiling & Moving Custom SASS
function custom_sass() {
  return gulp
    .src(paths.styles.src)
    .pipe(sourcemaps.init())
      .pipe(sass())
    .pipe(autoprefixer({
            browsers: ['last 2 versions'],
            cascade: false}))
    .pipe(cleanCSS())
    .pipe(sourcemaps.write())
    .pipe(gulp.dest(paths.styles.dest));
}

//Moving Normalize Css
function normalize() {
  return gulp
    .src(paths.normalize.src)
    .pipe(sourcemaps.init())
    .pipe(autoprefixer({
            browsers: ['last 2 versions'],
            cascade: false}))
    .pipe(cleanCSS())
    .pipe(sourcemaps.write())
    .pipe(gulp.dest(paths.normalize.dest));
}

//Moving Font Awesome Css
function fontawesome_css() {
  return gulp
    .src(paths.fontawesome_css.src)
    .pipe(sourcemaps.init())
    .pipe(autoprefixer({
            browsers: ['last 2 versions'],
            cascade: false}))
    .pipe(cleanCSS())
    .pipe(sourcemaps.write())
    .pipe(gulp.dest(paths.fontawesome_css.dest));
}

//Moving Font Awesome Fonts
function fontawesome_font() {
  return gulp
    .src(paths.fontawesome_font.src)
    .pipe(gulp.dest(paths.fontawesome_font.dest));
}

//Compiling & Moving Bootstrap Css
function bootstrap_css(){
  return gulp
    .src(paths.bootstrap_css.src)
    .pipe(sourcemaps.init())
      .pipe(sass())
    .pipe(autoprefixer({
            browsers: ['last 2 versions'],
            cascade: false}))
    .pipe(cleanCSS())
    .pipe(sourcemaps.write())
    .pipe(gulp.dest(paths.bootstrap_css.dest));
}

//Moving Bootstrap Js
function bootstrap_js(){
  return gulp
    .src(paths.bootstrap_js.src)
    .pipe(sourcemaps.init())
    .pipe(gulp.dest(paths.bootstrap_js.dest));
}

//Moving Jquery
function jquery(){
  return gulp
    .src(paths.jquery.src)
    .pipe(sourcemaps.init())
    .pipe(sourcemaps.write())
    .pipe(gulp.dest(paths.jquery.dest));
}

//Moving Tether Js
function tether(){
  return gulp
    .src(paths.tether.src)
    .pipe(sourcemaps.init())
    .pipe(sourcemaps.write())
    .pipe(gulp.dest(paths.tether.dest));
}

//Moving Popper Js
function popperjs(){
  return gulp
    .src(paths.popperjs.src)
    .pipe(sourcemaps.init())
    .pipe(sourcemaps.write())
    .pipe(gulp.dest(paths.popperjs.dest));
}

//Custom Scripts
function custom_js(){
  return gulp
    .src(paths.custom_js.src)
    .pipe(sourcemaps.init())
    .pipe(uglify())
    .pipe(sourcemaps.write())
    .pipe(gulp.dest(paths.custom_js.dest));
}

//Watching File
function watch() {
  gulp.watch(paths.styles.src, custom_sass).on('change', reload);
  gulp.watch(paths.custom_js.src, custom_js).on('change', reload);
  gulp.watch('./src/*.html', reload);
}

//Build Tasks of stylesheets & Scripts
var stylesheets = gulp.parallel(custom_sass, bootstrap_css, normalize, fontawesome_css, fontawesome_font);
var scripts = gulp.parallel(bootstrap_js, jquery, tether, popperjs, custom_js);

//Building task
var build = gulp.series( gulp.parallel(stylesheets,scripts), gulp.parallel(serve, watch));
gulp.task(build);
gulp.task('default', build);

Answer 2

我按照以下4.0语法编写并测试了gulpfile.js：（https://github.com/84tghuynh/Gulp-Bootstrap）

var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync');
var reload = browserSync.reload;
var minifycss = require('gulp-minify-css');
var concat = require('gulp-concat');
var rename = require('gulp-rename');
// var uglify = require('gulp-uglify');
var uglify = require('gulp-uglify-es').default;


/**
  * Concate javascript files to create scripts.js, rename to .min and minimize the js file
  * Create scripts.js and scripts.min.js in ./js folder
**/
function scripts() {
  return gulp.src([
    /* Add your JS files here, they will be combined in this order */
    // 'node_modules/jquery/dist/jquery.js',
    // 'node_modules/popper.js/dist/umd/popper.js',
    'node_modules/bootstrap/js/dist/util.js',
    'node_modules/bootstrap/js/dist/alert.js',
    'node_modules/bootstrap/js/dist/button.js',
    // 'node_modules/push.js/bin/push.js',
    'node_modules/bootstrap/js/dist/dropdown.js',
    'node_modules/bootstrap/js/dist/tab.js',
    'node_modules/bootstrap/js/dist/carousel.js',
    'node_modules/bootstrap/js/dist/collapse.js',
    'node_modules/bootstrap/js/dist/modal.js',
    'node_modules/bootstrap/js/dist/scrollspy.js',
    'node_modules/bootstrap/js/dist/tooltip.js',
    'node_modules/bootstrap/js/dist/popover.js',
    'node_modules/bootstrap/js/dist/toast.js',
    'src/js/main.js',
    'src/js/other.js'

    ])
    .pipe(concat('scripts.js'))
    .pipe(gulp.dest('js'))
    .pipe(rename({suffix: '.min'}))
    .pipe(uglify())
    .pipe(gulp.dest('./js'));
};

/**
  * compile main.scss to css and minimized the css file
  * Create main.css in ./css folder
**/
function css() {
    return gulp.src('src/scss/main.scss')
        .pipe(sass({includePaths: ['scss']}))
        .pipe(sass())
        .pipe(gulp.dest('./css'))
        .pipe(minifycss());
};

/**
  * BrowserSync
**/
function browserSync_(done) {
  browserSync.init({
    server: {
      baseDir: "./"
    },
    port: 3000
  });
  done();
}

/**
  *BrowserSync Reload
**/
function browserSyncReload(done) {
  browserSync.reload();
  done();
}

/**
  *  Watching changes on sccs files, then compile to css by "css" task and reload browser
  *  Watching changes on html files, then reload browser
  *  Watching changes on js files, then concate javascript file and reload browser
**/

function watchFiles() {
    gulp.watch("src/scss/**/*.scss",gulp.series(css,browserSyncReload));
    gulp.watch("./*.html", browserSyncReload);
    gulp.watch("src/js/*.js", gulp.series(scripts,browserSyncReload));
};

/**
  *  Init browser and watchfiles
**/
const build = gulp.series(browserSync_, watchFiles);
/**
  * Function to create main.css in ./css folder
**/
exports.css = css;
/**
  * Function to create scripts.js & scripts.min.js in ./js folder
**/
exports.scripts = scripts;
exports.default = build;

如何解决Gulp 4.0错误？

2 个答案: