Configuration de react avec gulp:

gulpfile.js

"use strict"

//import modules

var gulp = require('gulp');

var conn = require('gulp-connect');

var open = require('gulp-open');

var browserify = require('browserify');

var babelify = require('babelify');

var source = require('vinyl-source-stream');

var concat = require('gulp-concat');

//Configuration

var config = {

port:5500,

baseUrl: 'http://localhost',

paths:{

html: './src/*.html',

js: './src/**/*.js',

indexJs: './src/index.js',

css:[

'./node_modules/bootstrap/dist/css/bootstrap.min.css',

'./node_modules/bootstrap/dist/css/bootstrap-grid.min.css'

],

dist: './dist'

}

}

//Tâche pour lancer un serveur de dév en local

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

conn.server({

root:['dist'],

port: config.port,

base: config.baseUrl,

livereload: true

});

});

//tache pour ouvrir l'url dans le serveur

gulp.task('open', ['conn'], function(){

gulp.src('dist/index.html')

.pipe(open({

uri: config.baseUrl + ':' + config.port + '/'

}));

});

//Tâche pour copier l'html dans le répertoire dist

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

gulp.src(config.paths.html)

.pipe(gulp.dest(config.paths.dist))

.pipe(conn.reload());

});

// Task to compile js.

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

// indexJs.js is your main JS file with all your module inclusions

return browserify({

extensions: ['.js', '.jsx'],

entries: config.paths.indexJs,

debug: true

})

.transform('babelify', { presets: ['env'] })

.bundle()

.on('error', console.error.bind(console))

.pipe(source('bundle.js'))

.pipe(gulp.dest(config.paths.dist+'/js'))

.pipe(conn.reload())

});

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

gulp.watch(config.paths.html, ['html']);

gulp.watch(config.paths.js, ['js']);

});

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

gulp.src(config.paths.css)

.pipe(concat('bundle.css'))

.pipe(gulp.dest(config.paths.dist+'/css'))

});

//Tâche par défaut, permet d'excuter le tableau et lance la tâche 'open' avant 'html'.

gulp.task('default',['html','compile-js','css','open', 'watch']);

package.json

{

"name": "formation",

"version": "1.0.0",

"description": "Formation React",

"main": "index.js",

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1"

},

"author": "",

"license": "ISC",

"dependencies": {

"babel-core": "^6.26.3",

"babel-preset-env": "^1.7.0",

"babelify": "^8.0.0",

"bootstrap": "^4.1.3",

"browserify": "^16.2.2",

"gulp": "^3.9.1",

"gulp-concat": "^2.6.1",

"gulp-connect": "^5.6.1",

"gulp-open": "^3.0.1",

"jquery": "^3.3.1",

"vinyl-source-stream": "^2.0.0"

}

}