Question

我正在编辑现有的gulpfile.js文件。现有的javascript文件（fabricator.js和toolkit.js）正在被正确复制到dist /目录。但是，当我在资产内的新文件夹中添加一个新文件（demo.js）时，它不会显示在dist里面。我尝试过“gulp clean”，“gulp --dev”，“gulp serve”等等。

我很确定我在gulpfile.js中正确配置了它。尝试过我能想到的一切。谁能看到我错过的东西？

这是我的项目结构：

├── src
│   ├── assets
│   │   ├── demo
│   │   │   └── scripts
│   │   │       └── demo.js
│   │   ├── fabricator
│   │   │   ├── scripts
│   │   │   │   ├── fabricator.js
│   │   │   │   ├── prism.js
│   │   │   │   └── vendor.js
│   │   │   └── styles
│   │   │       ├── fabricator.scss
│   │   │       ├── partials
│   │   │       └── stylesheets
│   │   └── toolkit
│   │       ├── images
│   │       │   ├── logo.png
│   │       │   └── styleguide-hero.png
│   │       ├── scripts
│   │       │   └── toolkit.js
│   │       └── styles
│   │           └── toolkit.scss

这是我的gulpfile：

const assembler = require('fabricator-assemble');
const browserSync = require('browser-sync');
const csso = require('gulp-csso');
const del = require('del');
const gulp = require('gulp');
const gutil = require('gulp-util');
const gulpif = require('gulp-if');
const imagemin = require('gulp-imagemin');
const prefix = require('gulp-autoprefixer');
const rename = require('gulp-rename');
const reload = browserSync.reload;
const runSequence = require('run-sequence');
const sass = require('gulp-sass');
const sourcemaps = require('gulp-sourcemaps');
const webpack = require('webpack');
const zip = require('gulp-zip');

// configuration
const config = {
  dev: gutil.env.dev,
  styles: {
    browsers: 'last 1 version',
    fabricator: {
      src: 'src/assets/fabricator/styles/fabricator.scss',
      dest: 'dist/assets/fabricator/styles',
      watch: 'src/assets/fabricator/styles/**/*.scss',
    },
    toolkit: {
      src: 'src/assets/toolkit/styles/toolkit.scss',
      dest: 'dist/assets/toolkit/styles',
      watch: 'src/assets/toolkit/styles/**/*.scss',
    },
  },
  scripts: {
    fabricator: {
      src: './src/assets/fabricator/scripts/fabricator.js',
      dest: 'dist/assets/fabricator/scripts',
      watch: 'src/assets/fabricator/scripts/**/*',
    },
    toolkit: {
      src: './src/assets/toolkit/scripts/toolkit.js',
      dest: 'dist/assets/toolkit/scripts',
      watch: 'src/assets/toolkit/scripts/**/*',
    },
    demo: {
      src: './src/assets/demo/scripts/demo.js',
      dest: 'dist/assets/demo/scripts',
      watch: 'src/assets/demo/scripts/**/*',
    }
  },
  images: {
    toolkit: {
      src: ['src/assets/toolkit/images/**/*', 'src/favicon.ico'],
      dest: 'dist/assets/toolkit/images',
      watch: 'src/assets/toolkit/images/**/*',
    },
  },
  templates: {
    watch: 'src/**/*.{html,md,json,yml}',
  },
  dest: 'dist',
};


// clean
gulp.task('clean', del.bind(null, [config.dest]));


// styles
gulp.task('styles:fabricator', () => {
  gulp.src(config.styles.fabricator.src)
  .pipe(sourcemaps.init())
  .pipe(sass().on('error', sass.logError))
  .pipe(prefix('last 1 version'))
  .pipe(gulpif(!config.dev, csso()))
  .pipe(rename('f.css'))
  .pipe(sourcemaps.write())
  .pipe(gulp.dest(config.styles.fabricator.dest))
  .pipe(gulpif(config.dev, reload({ stream: true })));
});

gulp.task('styles:toolkit', () => {
  gulp.src(config.styles.toolkit.src)
  .pipe(gulpif(config.dev, sourcemaps.init()))
  .pipe(sass({
    includePaths: './node_modules',
  }).on('error', sass.logError))
  .pipe(prefix('last 1 version'))
  .pipe(gulpif(!config.dev, csso()))
  .pipe(gulpif(config.dev, sourcemaps.write()))
  .pipe(gulp.dest(config.styles.toolkit.dest))
  .pipe(gulpif(config.dev, reload({ stream: true })));
});

gulp.task('styles', ['styles:fabricator', 'styles:toolkit']);


// scripts
const webpackConfig = require('./webpack.config')(config);

gulp.task('scripts', (done) => {
  webpack(webpackConfig, (err, stats) => {
    if (err) {
      gutil.log(gutil.colors.red(err()));
    }
    const result = stats.toJson();
    if (result.errors.length) {
      result.errors.forEach((error) => {
        gutil.log(gutil.colors.red(error));
      });
    }
    done();
  });
});


// images
gulp.task('images', ['favicon'], () => {
  return gulp.src(config.images.toolkit.src)
    .pipe(imagemin())
    .pipe(gulp.dest(config.images.toolkit.dest));
});

gulp.task('favicon', () => {
  return gulp.src('src/favicon.ico')
  .pipe(gulp.dest(config.dest));
});


// assembler
gulp.task('assembler', (done) => {
  assembler({
    logErrors: config.dev,
    dest: config.dest,
  });
  done();
});

gulp.task('zip', () =>
    gulp.src(config.dest+'/**/*')
        .pipe(zip('simplify-style-guide.zip'))
        .pipe(gulp.dest(config.dest))
);


// server
gulp.task('serve', () => {

  browserSync({
    server: {
      baseDir: config.dest,
    },
    notify: false,
    logPrefix: 'FABRICATOR',
  });

  gulp.task('assembler:watch', ['assembler'], browserSync.reload);
  gulp.watch(config.templates.watch, ['assembler:watch']);

  gulp.task('styles:watch', ['styles']);
  gulp.watch([config.styles.fabricator.watch, config.styles.toolkit.watch], ['styles:watch']);

  gulp.task('scripts:watch', ['scripts'], browserSync.reload);
  gulp.watch([config.scripts.fabricator.watch, config.scripts.toolkit.watch, config.scripts.demo.watch], ['scripts:watch']);

  gulp.task('images:watch', ['images'], browserSync.reload);
  gulp.watch(config.images.toolkit.watch, ['images:watch']);

});


// default build task
gulp.task('default', ['clean'], () => {

  // define build tasks
  const tasks = [
    'styles',
    'scripts',
    'images',
    'assembler'
  ];

  // run build
  runSequence(tasks, () => {
    if (config.dev) {
      gulp.start('serve');
    }
  });

});

Answer 1

这是非标准的（IMO）：

 gulp.task('scripts:watch', ['scripts'], browserSync.reload);

 gulp.watch([config.scripts.fabricator.watch, config.scripts.toolkit.watch, config.scripts.demo.watch], ['scripts:watch']);

我会简化为：

gulp.watch([config.scripts.fabricator.watch, config.scripts.toolkit.watch,
            config.scripts.demo.watch], ['scripts'], browserSync.reload);

我会为其他人做同样的事情gulp.task（）在'serve'中。这遵循browserSync injecting examples的示例。

然后gulp.start通常不赞成。在gulp api docs中甚至没有提到它。

gulpfile.js中定义的新js文件未显示在dist文件夹中

1 个答案: