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

Question

我对毛g的经验不多，想知道部署时该怎么办？在部署时，如何排除某些任务（例如我的" 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。如果不是，您可以使用第二个策略。

与Heroku一起使用Gulp的一种方法是在您推到Heroku分支时自动运行Gulp。这是通过在package.json中使用postinstall脚本来完成的。喜欢：

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

当您推到远程分支时，Heroku将正常运行构建过程。完成构建过程后，它将运行 post -indstall 脚本。这将在墨西哥湾人中运行默认任务。当然，这将在您的Heroku dyno上运行，而不是在Localhost上。

如果您想更改 postSinstall 期间运行的不同子任务，则可以完成这样的新任务：

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

并将 postinstall 脚本更改为：

"postinstall": "gulp deployment"

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

要使此工作，您需要依赖项中的所有毛刺软件包而不是 devDepentencies 。毕竟， devDepentencies 未安装在Heroku上。

应该将墨西哥湾构建的文件添加到.gitignore文件中。大量输出的文件通常被发送到一个称为 dist 的文件夹，该文件完全放在存储库中。您不需要将它们放在存储库中，因为它们是在Heroku上构建的。

---

另一种方法是在部署前手动构建文件。这意味着您在 postinstall 脚本中都没有吞噬（或根本没有 post install 脚本），并将墨西哥套件保留在 devdepentencies 。正在构建的文件也不应在.gitignore中。

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

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