gulpfile.js – devfrontend.info

[Gulp] Passer des options pour lancer des tâches spécifiques suivant l’environnement (–dev –prod par exemple) avec yargs et gulp-if

19/10/2017 / admin

Source: Is it possible to pass a flag to Gulp to have it run tasks in different ways?

Yargs

Gulp doesn’t offer any kind of util for that, but you can use one of the many command args parsers. I like yargs. Should be:

var argv = require('yargs').argv;

gulp.task('my-task', function() {
    return gulp.src(argv.a == 1 ? options.SCSS_SOURCE : options.OTHER_SOURCE)
        .pipe(sass({style:'nested'}))
        .pipe(autoprefixer('last 10 version'))
        .pipe(concat('style.css'))
        .pipe(gulp.dest(options.SCSS_DEST));
});

var argv = require('yargs').argv;

gulp.task('my-task', function() {

return gulp.src(argv.a == 1 ? options.SCSS_SOURCE : options.OTHER_SOURCE)

.pipe(sass({style:'nested'}))

.pipe(autoprefixer('last 10 version'))

.pipe(concat('style.css'))

.pipe(gulp.dest(options.SCSS_DEST));

});

Combinaison de Yargs et de Gulp-if

You can also combine it with gulp-if to conditionally pipe the stream, very useful for dev vs. prod building:

var argv = require('yargs').argv,
    gulpif = require('gulp-if'),
    rename = require('gulp-rename'),
    uglify = require('gulp-uglify');

gulp.task('my-js-task', function() {
  gulp.src('src/**/*.js')
    .pipe(concat('out.js'))
    .pipe(gulpif(argv.production, uglify()))
    .pipe(gulpif(argv.production, rename({suffix: '.min'})))
    .pipe(gulp.dest('dist/'));
});

var argv = require('yargs').argv,

gulpif = require('gulp-if'),

rename = require('gulp-rename'),

uglify = require('gulp-uglify');

gulp.task('my-js-task', function() {

gulp.src('src/**/*.js')

.pipe(concat('out.js'))

.pipe(gulpif(argv.production, uglify()))

.pipe(gulpif(argv.production, rename({suffix: '.min'})))

.pipe(gulp.dest('dist/'));

});

And call with gulp my-js-task or gulp my-js-task --production.

Remarque: selon les cas, on peut vouloir n’exécuter une tâche que dans le cas ou l’argument --dev n’a pas été précisé. Il suffit de mettre un caractère ! (signifiant « différent de ») devant la condition:

.pipe(plugins.if(!argv.dev, plugins.uglify()))

1	.pipe(plugins.if(!argv.dev, plugins.uglify()))

Autre alternative (moins pratique, mais qui fonctionne aussi) : gulp-options.

[Gulp] Supprimer des fichiers ou dossiers avec le module Del

19/12/2016 / admin

Delete files and folders – You might want to delete some files before running your build. Since deleting files doesn’t work on the file contents, there’s no reason to use a gulp plugin. An excellent opportunity to use a vanilla node module.

var gulp = require('gulp');
    sass = require('gulp-sass');
    // rimraf = require('gulp-rimraf'); // deprecated
    del = require('del');

var paths = {
    styles  : './src/scss/**/*.scss'
};

gulp.task('clean:styles', function () {
    return del('./css');
});

gulp.task('styles', ['clean:styles'], function () {
    return gulp.src(paths.styles)
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest('./css'))
});

gulp.task('watch', function () {
    gulp.watch(paths.styles, ['styles']);
});

var gulp = require('gulp');

sass = require('gulp-sass');

// rimraf = require('gulp-rimraf'); // deprecated

del = require('del');

var paths = {

styles : './src/scss/**/*.scss'

};

gulp.task('clean:styles', function () {

return del('./css');

});

gulp.task('styles', ['clean:styles'], function () {

return gulp.src(paths.styles)

.pipe(sass().on('error', sass.logError))

.pipe(gulp.dest('./css'))

});

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

gulp.watch(paths.styles, ['styles']);

});

Problème:

[15:29:20] ‘styles’ errored after 95 ms
[15:29:20] Error: EEXIST: file already exists, mkdir ‘/home/intlangf/tb/gulp-plugins/dist/css’
at Error (native)

gulp tasks are failing with EEXIST errors (del), Del: Delete files and folders using globs.

Une alternative consite à utiliser del.sync:

gulp.task('clean:styles', function () {
    del.sync(paths.dist + '/css');
});

gulp.task('clean:styles', function () {

del.sync(paths.dist + '/css');

});

Autres solutions à envisager

Gulp recipe – Handling the Delete Event on Watch : fonctionne bien, mais seulement au Watch.
Plugin Gulp gulp-deleted

[Gulp] Gulpfile.js – Les bonnes pratiques de coding

14/12/2016 / admin

Patterns et recettes

Des workflows Gulp sous GitHub

The Zephir GULP workflow. http://zephir.ch (découpé en tâches)
WordPressify v0.1.3. A build system designed to automate your WordPress development workflow.
Gulp workflow for front-end development – modules exports, etc… un bon boilerplate.
La gulpfile de Foundation for Sites

Curated list of useful gulp plugins for awesome and easy frontend web development.

Building a Better Gulpfile
Advanced Gulp File, repo Git, sprites SVG.
My Advanced Gulp Workflow for WordPress Themes
Introduction à Gulp par Putain de Code !
Introduction to Gulp.js with practical examples

Articles récents

Catégories

Archives

Méta

Étiquette : gulpfile.js