Gulp Task sequentiell abarbeiten TYPO3 Migrationen

Frontend-Webdevelopment mit Gulp Task sequentiell abarbeiten ist bei modernen Webdesign nötig. Dabei sind Gulp-Tasks ein wichtiger Bestandteil dieser tollen neuen Technologie. Gulp ist eine NodeJS Applikation, die natürlich auch in der Prozessverarbeitung ihre großen Vorzüge bezüglich der Performance hat. Asynchrone Prozessverarbeitung. Damit tun sich traditionelle Webdeveloper, gerade aus der PHP-Welt recht schwer. Hier findet man sich dann schnell in der sogenannten Callback-Hell wieder. An diesem Punkt sollte man sich natürlich fragen, ob man die richtige Technologie für das zu lösende Problem gewählt hat.

Gulp Task sequentiell ausführen – TYPO3 Gulp

In einer TYPO3 Migration von 6.2 auf 7.6 bin ich vor kurzem auf eine Herausforderung mit Gulp gestoßen. Hier war es wichtig die CSS-Files und JS-Files erst zu minimieren und dann an die richtige Stelle zu meiner Design Extension zu exportieren. So konnte unabhängig im Front- und Backend im Team gearbeitet werden.

const gulp = require('gulp');
const debug = require('gulp-debug');
const gulpLoadPlugins = require('gulp-load-plugins');
const wiredep = require('wiredep').stream;
const del = require('del');
const runSequence = require('run-sequence');

const $ = gulpLoadPlugins();

var stylesTarget = 'Resources/Public/Styles/';
var scriptsTarget = 'Resources/Public/Scripts';
var imagesTarget = 'Resources/Public/Images';
var fontsTarget = 'Resources/Public/Fonts';

gulp.task('clean-styles', del.bind(null, [stylesTarget]));
gulp.task('styles', () => {
  return gulp.src('../../rogoit-design/app/Styles/*.scss')
    .pipe(debug())
    .pipe($.plumber())
    .pipe($.sourcemaps.init())
    .pipe($.sass.sync({
      outputStyle: 'expanded',
      precision: 10,
      includePaths: ['.']
    }).on('error', $.sass.logError))
    .pipe($.autoprefixer({browsers: ['> 1%', 'last 2 versions', 'Firefox ESR']}))
    .pipe($.sourcemaps.write())
    .pipe(gulp.dest(stylesTarget));
});

gulp.task('clean-scripts', del.bind(null, [scriptsTarget]));
gulp.task('scripts', () => { // ['lint'],
  return gulp.src('../../rogoit-design/app/Scripts/**/*.js')
    .pipe(debug())
    .pipe($.plumber())
    .pipe($.babel())
    .pipe(gulp.dest(scriptsTarget));
});

gulp.task('vendor-scripts', () => { // ['lint'],
    return gulp.src(['../../rogoit-design/dist/Scripts/vendor/**/*', '../../rogoit-design/dist/Scripts/vendor.js'])
        .pipe(debug())
        .pipe(gulp.dest('Resources/Public/Scripts/vendor'));
});

gulp.task('clean-images', del.bind(null, [imagesTarget]));
gulp.task('images', () => {
  return gulp.src('../../rogoit-design/app/Images/**/*')
    .pipe(debug())
    .pipe($.imagemin({
      progressive: true,
      interlaced: true,
      svgoPlugins: [{cleanupIDs: false}]
    }))
    .pipe(gulp.dest(imagesTarget));
});

gulp.task('clean-fonts', del.bind(null, [fontsTarget]));
gulp.task('fonts', () => {
  return gulp.src(require('main-bower-files')('**/*.{eot,svg,ttf,woff,woff2}', function (err) {})
    .concat('../../rogoit-design/app/Fonts/**/*'))
    .pipe(debug())
    .pipe(gulp.dest(fontsTarget));
});


function lint(files, options) {
  return gulp.src(files)
    .pipe($.eslint(options))
    .pipe($.eslint.format());
}

gulp.task('lint', () => {
  return lint('../../rogoit-design/Scripts/**/*.js', {
    fix: true
  })
  .pipe(gulp.dest(scriptsTarget));
});

gulp.task('compress', ['styles', 'scripts'], () => {
  return gulp.src(['Resources/Public/**/*'])
    .pipe(debug())
    .pipe($.if('*.js', $.uglify()))
    .pipe($.if('*.css', $.cssnano({safe: true, autoprefixer: false})))
    .pipe(gulp.dest('Resources/Public'));
});

gulp.task('default', function(done) {
    runSequence('clean-styles', 'clean-scripts', 'clean-images', 'clean-fonts','styles', 'scripts', 'vendor-scripts', 'fonts', 'images', 'compress', function() {
        console.log('All tasks finished');
        done();
    });
});

const gulp = require('gulp');

const debug = require('gulp-debug');

const gulpLoadPlugins = require('gulp-load-plugins');

const wiredep = require('wiredep').stream;

const del = require('del');

const runSequence = require('run-sequence');

const $ = gulpLoadPlugins();

var stylesTarget = 'Resources/Public/Styles/';

var scriptsTarget = 'Resources/Public/Scripts';

var imagesTarget = 'Resources/Public/Images';

var fontsTarget = 'Resources/Public/Fonts';

gulp.task('clean-styles', del.bind(null, [stylesTarget]));

gulp.task('styles', () => {

return gulp.src('../../rogoit-design/app/Styles/*.scss')

.pipe(debug())

.pipe($.plumber())

.pipe($.sourcemaps.init())

.pipe($.sass.sync({

outputStyle: 'expanded',

precision: 10,

includePaths: ['.']

}).on('error', $.sass.logError))

.pipe($.autoprefixer({browsers: ['> 1%', 'last 2 versions', 'Firefox ESR']}))

.pipe($.sourcemaps.write())

.pipe(gulp.dest(stylesTarget));

});

gulp.task('clean-scripts', del.bind(null, [scriptsTarget]));

gulp.task('scripts', () => { // ['lint'],

return gulp.src('../../rogoit-design/app/Scripts/**/*.js')

.pipe(debug())

.pipe($.plumber())

.pipe($.babel())

.pipe(gulp.dest(scriptsTarget));

});

gulp.task('vendor-scripts', () => { // ['lint'],

return gulp.src(['../../rogoit-design/dist/Scripts/vendor/**/*', '../../rogoit-design/dist/Scripts/vendor.js'])

.pipe(debug())

.pipe(gulp.dest('Resources/Public/Scripts/vendor'));

});

gulp.task('clean-images', del.bind(null, [imagesTarget]));

gulp.task('images', () => {

return gulp.src('../../rogoit-design/app/Images/**/*')

.pipe(debug())

.pipe($.imagemin({

progressive: true,

interlaced: true,

svgoPlugins: [{cleanupIDs: false}]

}))

.pipe(gulp.dest(imagesTarget));

});

gulp.task('clean-fonts', del.bind(null, [fontsTarget]));

gulp.task('fonts', () => {

return gulp.src(require('main-bower-files')('**/*.{eot,svg,ttf,woff,woff2}', function (err) {})

.concat('../../rogoit-design/app/Fonts/**/*'))

.pipe(debug())

.pipe(gulp.dest(fontsTarget));

});

function lint(files, options) {

return gulp.src(files)

.pipe($.eslint(options))

.pipe($.eslint.format());

}

gulp.task('lint', () => {

return lint('../../rogoit-design/Scripts/**/*.js', {

fix: true

})

.pipe(gulp.dest(scriptsTarget));

});

gulp.task('compress', ['styles', 'scripts'], () => {

return gulp.src(['Resources/Public/**/*'])

.pipe(debug())

.pipe($.if('*.js', $.uglify()))

.pipe($.if('*.css', $.cssnano({safe: true, autoprefixer: false})))

.pipe(gulp.dest('Resources/Public'));

});

gulp.task('default', function(done) {

runSequence('clean-styles', 'clean-scripts', 'clean-images', 'clean-fonts','styles', 'scripts', 'vendor-scripts', 'fonts', 'images', 'compress', function() {

console.log('All tasks finished');

done();

});

Gulp Task sequentiell

Das hier ist das gesamte Script des Projekts. Vielleicht kann sich hier der eine oder andere entsprechend inspirieren. Grundsätzlich werden hier die Webfolder bzw. Targets geleert, die neuen Files hinein kopiert und dann komprimiert. Diese Prozesse können Aufgrund ihrer Aufgabenreihenfolge nicht asynchron abgearbeitet werden. Hier sind die entscheidenen Zeilen:

const runSequence = require('run-sequence');
.
.
.
gulp.task('default', function(done) {
    runSequence('clean-styles', 'clean-scripts', 'clean-images', 'clean-fonts','styles', 'scripts', 'vendor-scripts', 'fonts', 'images', 'compress', function() {
        console.log('All tasks finished');
        done();
    });
});

const runSequence = require('run-sequence');

gulp.task('default', function(done) {

runSequence('clean-styles', 'clean-scripts', 'clean-images', 'clean-fonts','styles', 'scripts', 'vendor-scripts', 'fonts', 'images', 'compress', function() {

console.log('All tasks finished');

done();

});

Man nutzt die „run-sequence“ Bibliothek, damit man die Tasks im default Prozess sequentiell ausführen kann.

Gulp run sequence – Gulp Task sequentiell abarbeiten

Gulp Task sequentiell ausführen – TYPO3 Gulp

About Author

1 Kommentar

Leave A Reply Cancel Reply

Gulp Task sequentiell ausführen – TYPO3 Gulp

About Author

Related Posts

Pair Programming Tipps und Studien

Codeception Test einzelnen ausführen

Twig key underscore Unterstrich dash Template attribute-Methode

1 Kommentar

Leave A Reply Cancel Reply