Question

我对gulp没有多少经验，不知道在部署时该怎么做？如何在部署时排除某些任务（例如我的'sass'任务）或者gulp如何为生产工作 - 我该怎么办？我不确定我是否使用了错误的词语或者只是不理解它，但到目前为止我找不到很多在线内容。

我的gulp文件：

var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();
var cleanCSS = require('gulp-clean-css');
var rename = require("gulp-rename");
var uglify = require('gulp-uglify');

// Compiles SCSS files from /scss into /css
gulp.task('sass', function() {
  return gulp.src('scss/main.scss')
    .pipe(sass())
    .pipe(gulp.dest('css'))
    .pipe(browserSync.reload({
      stream: true
    }))
});

// Minify compiled CSS
gulp.task('minify-css', ['sass'], function() {
  return gulp.src('css/main.css')
    .pipe(cleanCSS({
      compatibility: 'ie8'
    }))
    .pipe(rename({
      suffix: '.min'
    }))
    .pipe(gulp.dest('css'))
    .pipe(browserSync.reload({
      stream: true
    }))
});

// Minify custom JS
gulp.task('minify-js', function() {
  return gulp.src('js/scripts.js')
    .pipe(uglify())
    .pipe(rename({
      suffix: '.min'
    }))
    .pipe(gulp.dest('js'))
    .pipe(browserSync.reload({
      stream: true
    }))
});

// Copy vendor files from /node_modules into /vendor
// NOTE: requires `npm install` before running!
gulp.task('copy', function() {
  gulp.src([
      'node_modules/bootstrap/dist/**/*',
      '!**/npm.js',
      '!**/bootstrap-theme.*',
      '!**/*.map'
    ])
    .pipe(gulp.dest('vendor/bootstrap'))

  gulp.src(['node_modules/jquery/dist/jquery.js',
            'node_modules/jquery/dist/jquery.min.js'])
    .pipe(gulp.dest('vendor/jquery'))

  gulp.src(['node_modules/jquery-easing/*.js'])
    .pipe(gulp.dest('vendor/jquery-easing'))
})

// Default task
gulp.task('default', ['sass', 'minify-css', 'minify-js', 'copy']);

// Configure the browserSync task
gulp.task('browserSync', function() {
  browserSync.init({
    server: {
      baseDir: ''
    },
  })
})

// Dev task with browserSync
gulp.task('dev', ['browserSync', 'sass', 'minify-css', 'minify-js'], function() {
  gulp.watch('scss/*.scss', ['sass']);
  gulp.watch('css/*.css', ['minify-css']);
  gulp.watch('js/*.js', ['minify-js']);
  // Reloads the browser whenever HTML or JS files change
  gulp.watch('*.html', browserSync.reload);
  gulp.watch('js/**/*.js', browserSync.reload);
});

Answer 1

这完全取决于您的托管解决方案以及您更喜欢使用的部署过程。你以前的一些问题都有Heroku标签，所以我假设你使用Heroku。如果没有，你可以使用第二种策略。

使用Gulp和Heroku的一种方法是当你推到Heroku分支时自动运行Gulp。这是通过在package.json中使用postinstall脚本来完成的。像这样：

"scripts": {
  ..
  "postinstall": "gulp"
}

当您推送到远程分支时，Heroku将正常运行构建过程。构建过程完成后，它将运行 postinstall 脚本。这将运行gulpfile中的默认任务。当然，这将在您的Heroku dyno上运行，而不是在localhost上运行。

如果您想要更改在 postinstall 期间运行的不同子任务，您可以执行以下新任务：

gulp.task('deployment', ['minify-css', 'minify-js', 'copy']);

并将 postinstall 脚本更改为：

"postinstall": "gulp deployment"

部署任务现在将运行，而不是默认任务。

为此，您需要 dependencies 中的所有gulp包，而不是 devDependencies 。毕竟， devDependencies 没有安装在Heroku上。

Gulp构建的文件应该添加到.gitignore文件中。 Gulp输出的文件通常被发送到名为 dist 的文件夹，该文件夹完全保存在存储库之外。您不需要将它们放在存储库中，因为它们是在Heroku上构建的。

另一种方法是在部署之前自己手动构建文件。这意味着你没有在 postinstall 脚本中使用gulp（或根本没有 postinstall 脚本）并将gulp包保存在 devDependencies 。正在构建的文件也不应该在.gitignore中。

在部署之前，使用gulp deployment构建文件，然后提交它们。当您推送到Heroku时，文件将像平常一样上传，而不是在那里构建。

当您拥有普通的网络托管服务时，通常会使用此策略。

GULP - 如何在生产/部署中使用gulp？

1 个答案: