2017-12-16 8 views
0

私はプロジェクトにgulpタスクを実装しています。 gulp-assests-version-replaceをインストールして、CSSファイルのバージョン管理ファイルを作成しました。gulp-sequence not working

ここでは、app.cssを作成した後に上記のタスクを実行します。 app.cssを作成する前に実行されるため、バージョン管理ファイルを作成できません。

以下は、gulpタスクを実行するためのgulpファイルです。

var gulp = require('gulp'); 

var autoprefixer = require('gulp-autoprefixer'); 
var changed  = require('gulp-changed'); 
var concat  = require('gulp-concat'); 
var del   = require('del'); 
var gulpif  = require('gulp-if'); 
var gutil  = require('gulp-util'); 
var imagemin  = require('gulp-imagemin'); 
var jshint  = require('gulp-jshint'); 
var notify  = require('gulp-notify'); 
var plumber  = require('gulp-plumber'); 
var rename  = require('gulp-rename'); 
var sass   = require('gulp-sass'); 
var assetsVersionReplace = require('gulp-assets-version-replace'); 
var uglify  = require('gulp-uglify'); 


var path = { 
    assets: 'skin/frontend/custom_theme/default/' 
}; 

var config = { 
    tasks: { 
     css: { 
      autoprefixerOptions: { 
       // For "browserslist" see "package.json" 
       cascade: false, 
       supports: false // See: https://github.com/filamentgroup/select-css/issues/17 
      }, 
      dest: path.assets + 'css/build', 
      sassOptions: { 
       outputStyle: 'compressed' 
      }, 
      src: path.assets + 'css/src/**/*.scss' 
     }, 
     version: { 
      autoprefixerOptions: { 
       // For "browserslist" see "package.json" 
       cascade: false, 
       supports: false // See: https://github.com/filamentgroup/select-css/issues/17 
      }, 
      dest: path.assets + 'css/build', 
      sassOptions: { 
       outputStyle: 'compressed' 
      }, 
      src: path.assets + 'css/build/app.css' 
     } 
    } 
} 

gulp.task('default', ['clean'], function() { 
    gulp.start('css'); 
    gulp.start('assetsVersionReplace'); 
}); 

    gulp.task('clean', function() { 
    return del([ 
     path.assets + 'css/build', 
     path.assets + 'js/build', 
     path.assets + 'js/min', 
     path.assets + 'img/build' 
    ]); 
}); 
gulp.task('css', function() { 
    return gulp.src(config.tasks.css.src) 
     .pipe(plumber({ 
      errorHandler: reportError 
     })) 
     .pipe(sass(config.tasks.css.sassOptions)) 
     .pipe(autoprefixer(config.tasks.css.autoprefixerOptions)) 
     .pipe(gulp.dest(config.tasks.css.dest)); 
}); 

gulp.task('assetsVersionReplace', function() { 
    return gulp.src(config.tasks.version.src) 
    .pipe(assetsVersionReplace({ 
     replaceTemplateList: [ 
     'app/design/frotend/custom_theme/default/template/page/head.phtml' 
     ] 
    })) 
    .pipe(gulp.dest(config.tasks.version.dest)) 
}); 

gulp.task('watch', function() { 
    // Run "default" immediately 
    gulp.start('default'); 

    // CSS 
    gulp.watch(config.tasks.css.src, ['css']); 
    gulp.watch(config.tasks.version.src,    ['assetsVersionReplace']); 
}); 

css(または実行した 'CSS'タスク)を作成した後でassetsVersionReplaceタスクを実行するにはどうすればよいですか?

答えて

0

どちらか

gulp.task('assetsVersionReplace', ['css'], function() { 

か、それができない場合は、ヘルパータスクを追加

gulp.task('assetsVersionReplaceAfterCss', ['css'], function() { 
    gulp.start('assetsVersionReplace'); 
} 

、代わりに

0

をそれを使用する

gulp.task('assetsVersionReplace', function() { 

を変更どうしてあなたはあごを使うの?シリーズ。

gulp.task('default', 
    gulp.series(
     'css', 
     'assetsVersionReplace' 
    ) 
); 
+0

gulp.seriesはgulp4.0のみ - まだベータ版です! – Mark