Gulpfile para projetos com LESS, Browserify e React

Isso gulpfile.jsfornece o seguinte:

  • Um jsdestino que constrói um pacote JavaScript usandobrowserify
  • Um cssdestino que cria um único arquivo CSS usandoless
  • Suporte para um --productionsinalizador, que reduzirá as fontes
  • Um watchdestino executado watchifypara as fontes JavaScript e padrão gulp.watch()para as fontes LESS para recarga robusta em tempo real de ambas.

Configure-o alterando as variáveis ​​perto do topo, nas importações.

Você precisa instalar vários pacotes:

$ npm install --save-dev browserify reactify watchify vinyl-source-stream gulp gulp-sourcemaps gulp-util vinyl-buffer gulp-less yargs gulp-if gulp-minify-css gulp-uglify

Em seguida, crie gulpfile.jsconforme abaixo:

/*jshint globalstrict:true, devel:true, newcap:false */
/*global require */

/**
* Build CSS and JavaScript using `gulp`.

*

* Main targets are: `js`, `css` and `watch`.

*

* Run with `--production` to get minified sources.

*/


"use strict";

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

gulp
= require('gulp'),
gutil
= require('gulp-util'),
gulpif
= require('gulp-if'),

source
= require('vinyl-source-stream'),
buffer
= require('vinyl-buffer'),
sourcemaps
= require('gulp-sourcemaps'),
browserify
= require('browserify'),
watchify
= require('watchify'),
reactify
= require('reactify'),
uglify
= require('gulp-uglify'),

less
= require('gulp-less'),
minifyCSS
= require('gulp-minify-css');

// Directory where static files are found. Don't forget the slash at the end.
var staticDirectory = './static/',

// Source and target JS files for Browserify
jsMainFile
= staticDirectory + 'js/app.jsx',
jsBundleFile
= 'bundle.js',

// Source and target LESS files
cssMainFile
= staticDirectory + 'less/styles.less',
cssFiles
= staticDirectory + 'less/**/*.less';

// Browserify bundler, configured for reactify with sources having a .jsx extension
var bundler = browserify({
entries
: [jsMainFile],
transform
: [reactify],
extensions
: ['.jsx'],
debug
: !argv.production,
cache
: {}, packageCache: {}, fullPaths: true // for watchify
});

// Build JavaScript using Browserify
gulp
.task('js', function() {
return bundler
.bundle()
.pipe(source(jsBundleFile))
.pipe(buffer())
.pipe(gulpif(!argv.production, sourcemaps.init({loadMaps: true}))) // loads map from browserify file
.pipe(gulpif(!argv.production, sourcemaps.write('./'))) // writes .map file
.pipe(gulpif(argv.production, uglify()))
.pipe(gulp.dest(staticDirectory));
});

// Build CSS
gulp
.task('css', function(){
return gulp.src(cssMainFile)
.pipe(less())
.pipe(gulpif(argv.production, minifyCSS({keepBreaks:true})))
.pipe(gulp.dest(staticDirectory));
});

// Watch JS + CSS using watchify + gulp.watch

gulp
.task('watchify', function() {
var watcher = watchify(bundler);
return watcher
.on('error', gutil.log.bind(gutil, 'Browserify Error'))
.on('update', function () {
watcher
.bundle()
.pipe(source(jsBundleFile))
.pipe(buffer())
.pipe(sourcemaps.init({loadMaps: true})) // loads map from browserify file
.pipe(sourcemaps.write('./')) // writes .map file
.pipe(gulp.dest(staticDirectory));

gutil
.log("Updated JavaScript sources");
})
.bundle() // Create the initial bundle when starting the task
.pipe(source(jsBundleFile))
.pipe(gulp.dest(staticDirectory));
});

gulp
.task('csswatch', function () {
gulp
.watch(cssFiles, ['css']);
});

gulp
.task('watch', ['watchify', 'csswatch']);
gulp
.task('default', ['js', 'css']);