0

私はいくつかの非常に標準的なタスクを実行する素敵な小さなビルド スクリプトを作成しました...

  • deploy/最初の前にディレクトリをクリーンアップする
  • dev/ディレクトリから関連deploy/ディレクトリへのファイルの構築、連結、醜化、およびコピー
  • 変化の監視
  • 等

しかし、より良い文脈のために、以下にそれを含めました：

var gulp              = require('gulp');
var changed           = require('gulp-changed');
var newer             = require('gulp-newer');
var sass              = require('gulp-sass');
var autoprefixer      = require('gulp-autoprefixer');
var cssmin            = require('gulp-minify-css');
var sourcemaps        = require('gulp-sourcemaps');
var concat            = require('gulp-concat');
var uglify            = require('gulp-uglify');
var notify            = require('gulp-notify');
var plumber           = require('gulp-plumber');
var imagemin          = require('gulp-imagemin');
var shopify           = require('gulp-shopify-upload');
var watch             = require('gulp-watch');
var rename            = require('gulp-rename');
var filter            = require('gulp-filter');
var flatten           = require('gulp-flatten');

var del               = require('del');
var argv              = require('yargs').argv;
var runsequence       = require('run-sequence');
var config            = require('./config.json');

var plumberErrorHandler = {
  errorHandler: notify.onError({
    title: 'Gulp',
    message: "Error: <%= error.message %>"
  })
};

gulp.task('styles', function() {
  return gulp.src(['dev/styles/updates.scss'])
    .pipe(plumber(plumberErrorHandler))
    .pipe(sourcemaps.init())
    .pipe(sass({ errLogToConsole: true }))
    .pipe(autoprefixer({ browsers: ['last 2 versions', 'ie >= 10', 'Android >= 4.3'] }))
    .pipe(cssmin())
    .pipe(sourcemaps.write())
    .pipe(rename({ suffix: '.css', extname: '.liquid' }))
    .pipe(gulp.dest('deploy/assets'));
});

gulp.task('scripts', function() {
  return gulp.src(['dev/scripts/**'])
    .pipe(plumber(plumberErrorHandler))
    .pipe(sourcemaps.init())
    .pipe(concat('main.js'))
    .pipe(uglify())
    .pipe(sourcemaps.write())
    .pipe(rename({ suffix: '.js', extname: '.liquid' }))
    .pipe(gulp.dest('deploy/assets'));
});

gulp.task('vendor', function() {
  var styles = filter(['styles/**/*.scss']);
  var scripts = filter(['scripts/**/*.js']);
  return gulp.src(['dev/vendor/**'])
    .pipe(plumber(plumberErrorHandler))
    .pipe(styles)
    .pipe(sass({ errLogToConsole: true }))
    .pipe(cssmin())
    .pipe(styles.restore())
    .pipe(scripts)
    .pipe(concat('vendor.js'))
    .pipe(uglify())
    .pipe(scripts.restore())
    .pipe(flatten())
    .pipe(gulp.dest('deploy/assets'));
});

gulp.task('copy', function() {
  return gulp.src(['dev/liquid/**'], {base: 'dev/liquid'})
    .pipe(plumber(plumberErrorHandler))
    .pipe(newer('deploy/'))
    .pipe(gulp.dest('deploy/'));
});

gulp.task('clean', function(cb) {
    del(['deploy/**/*'], cb);
});

gulp.task('imagemin', function() {
  return gulp.src(['dev/liquid/assets/*'])
    .pipe(imagemin({ optimizationLevel: 5, progressive: true, interlaced: true }))
    .pipe(gulp.dest('dev/liquid/assets/'));
});

gulp.task('build', ['clean'], function(cb) {
  runsequence(['copy', 'styles', 'scripts', 'vendor'], cb);
});

gulp.task('watch', ['build'], function() {
  gulp.watch(['dev/styles/**/*.scss'], ['styles']);
  gulp.watch(['dev/scripts/**/*.js'], ['scripts']);
  gulp.watch(['dev/vendor/**/*.{js,scss}'], ['vendor']);
  gulp.watch(['dev/liquid/**'], ['copy']);
});

gulp.task('upload', ['watch'], function() {
  if (!argv.env) {
    return false;
  } else if (argv.env && config.shopify.hasOwnProperty(argv.env)) {
    env = config.shopify[argv.env];
  } else {
    env = config.shopify.dev;
  }
  return watch('deploy/{assets|layout|config|snippets|templates|locales}/**')
    .pipe(shopify(env.apiKey, env.password, env.url, env.themeId, env.options));
});

gulp.task('default', ['clean', 'build', 'watch', 'upload']);

私が直面している問題は、uploadタスクとcopyタスクに直接関係しています。

実行中gulp --env [environment-name](例: gulp --env staging) または だけgulp --envで、 のサブディレクトリの 1 つにあるファイルを保存すると dev/liquid/、copyタスクが期待どおりに実行され、保存およびコピーされた単数形のファイルが 経由でアップロードされます。uploadタスク。ただし、ときどきファイルを保存すると、copyタスクは通常どおり実行されますが、時計が異常になり、upload内部のすべてのファイルをアップロードしようとしますdeploy/(これにより、API 呼び出し制限エラーが発生し、当然問題が発生します)。

私はもともとgulp-changed自分のタスク内で使用していましcopyたが、ディレクトリではなく 1:1 マッピングのみを行うことに気付きました (これがどれほど正しいかわかりません)。に切り替えたところgulp-newer、しばらくはうまくいきましたが、その後、再びおかしくなり始めました。

何が原因なのかわかりません。疑念はありますが、どう対処すればよいかわかりません。アドバイス、観察、改善の提案、ロマンチックなディナーに適した場所、信頼できるペットシッターなど、大歓迎です。

ティティティティ!!!

_t

編集：フリークアウト（つまり、すべてのファイルが一度にアップロードしようとする）を再現するのに苦労しており、同じことを実行するとgulp --env stagingフリークアウトが発生することもあれば、同じファイルセットで同じタスクを起動すると発生することもありますなし。たぶん、gulp-newer と gulp-changed の比較として変更された日付の使用と関係があるのでしょうか??

ダブルエディット：多分それは時々それが動作し、時には動作しない原因の競合状態ですか？node-glob または minimatch github ページで競合状態について何かを見たのを覚えています....

4

0 に答える 0