Skip to content

Commit

Permalink
start of webpack
Browse files Browse the repository at this point in the history
  • Loading branch information
@FranzPoize
FranzPoize committed Jan 6, 2016
1 parent 43dd98e commit 3f44a22
Show file tree
Hide file tree
Showing 7 changed files with 97 additions and 132 deletions.
11 changes: 11 additions & 0 deletions .babelrc
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
{
"presets": ["react", "es2015"],
"plugins": [
"syntax-async-functions",
["transform-async-to-module-method", {
"module": "bluebird",
"method": "coroutine"
}],
"transform-class-properties"
],
}
2 changes: 1 addition & 1 deletion app/scripts/stores/local-client.stores.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import {Client} from 'nexus-flux/src/adapters/Local';
import {Client} from 'nexus-flux';

export default class LocalClient {
static setup(server) {
Expand Down
2 changes: 1 addition & 1 deletion app/scripts/stores/local-server.stores.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import {Server} from 'nexus-flux/src/adapters/Local';
import {Server} from 'nexus-flux';

export default class LocalServer {
constructor(stores) {
Expand Down
2 changes: 1 addition & 1 deletion app/scripts/stores/remote-client.stores.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react';
import Client from 'nexus-flux-socket.io/src/client';
import Client from 'nexus-flux-socket.io';
import Lifespan from 'lifespan';
import HoodieApi from '../services/hoodie.services.js';

Expand Down
167 changes: 38 additions & 129 deletions gulpfile.js
View file
Original file line number Diff line number Diff line change
@@ -1,57 +1,24 @@
var Promise = require('bluebird'); //Bluebird promise are way better than native
var fs = Promise.promisifyAll(require('fs')); //We just want promise seriously
var path = require('path');

var gulp = require('gulp');

// BROWSERIFY Dep
var browserify = require('browserify');
var shim = require('browserify-shim');
var babelify = require('babelify');
var watchify = require('watchify');
var envify = require('envify/custom');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
//webpack Dep
var webpack = require('webpack');
var WebpackDevServer= require('webpack-dev-server');
var webpackConfig = require('./webpack.config.js');

//CSS Dep
var sass = require('gulp-sass');
var minifyCss = require('gulp-minify-css');

//Utils
var del = require('del');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var gutil = require('gulp-util');
var sourcemaps = require('gulp-sourcemaps');
var rev = require('gulp-rev');
var revReplace = require('gulp-rev-replace');
var useref = require('gulp-useref');
var gulpif = require('gulp-if');
var uglify = require('gulp-uglify');
var browserSync = require('browser-sync').create();
var assign = require('lodash.assign');
var filter = require('gulp-filter');
var autoprefixer = require('gulp-autoprefixer');
var through = require('through');

// Browserify setup
/* What we want right now :
* - babelify experimental
* - watchified bundle generation
*/

customBrowserifyOpts = {
entries: ['./app/scripts/main.js'],
debug: true,//gutil.env.type == 'prod' ? false : true,
extensions: ['.jsx'],
noParse: [
path.resolve('node_modules/prototypo.js/dist/prototypo.js'),
path.resolve('node_modules/prototypo-canvas/dist/prototypo-canvas.js'),
'/Users/yannickmathey/Documents/prototypo.js/dist/prototypo-canvas.js'
]
}

var opts = assign({}, watchify.args, customBrowserifyOpts);
var gutil = require('gulp-util');

gulp.task('images', function() {
gulp.src('./app/images/*.*')
Expand All @@ -77,12 +44,6 @@ gulp.task('cp-static', function() {
.pipe(gulp.dest('./dist/'));
});

gulp.task('cp-scripts', function() {
gulp.src(['./app/scripts/**/*.*'])
.pipe(gulp.dest('./dist/app/scripts'));

})

gulp.task('css-vendor', function() {
//This is a bit hackish but right now i don't care
gulp.src(['./node_modules/normalize.css/normalize.css',
Expand All @@ -100,97 +61,45 @@ gulp.task('css-app', function() {
.pipe(concat('app.css'))
.pipe(autoprefixer())
.pipe(sourcemaps.write())
//.pipe(gutil.env.type == 'prod' ? minifyCss() : gutil.noop())
.pipe(gulp.dest('./dist/assets/'))
.pipe(filter('**/*.css'))
.pipe(browserSync.reload({stream:true}));
});

function bundle() {
return b.then(function(b) {

return b.bundle()
.on('error', gutil.log.bind(gutil, 'Browserify Error'))
.pipe(source('bundle.js'))
.pipe(buffer())
.pipe(sourcemaps.init({loadMaps:true}))
.pipe(sourcemaps.write('./'))
// .pipe(gutil.env.type == 'prod' ? uglify() :gutil.noop())
.pipe(gulp.dest('dist'))
})
}

var readPrelude = fs.readFileAsync('./__prelude.js');

var bBase = readPrelude.then(function(prelude) {
return browserify(opts)
// adds __prelude.js to all files in app/scripts
.transform(function(file) {
console.log('File name: ', file);
if (file.indexOf('prototypo/app/scripts') != -1) {
var data = prelude;
return through(write, end);

function write(buf) { data += buf }

function end() {
this.queue(data);
this.queue(null);
}
} else {
return through(function write(data) {
this.queue(data);
}, function end() {
this.queue(null);
});
}
})
.transform(babelify.configure({
stage: 0, //enabling that es7 goodness
extensions:['.jsx','.js']
}))
.transform(envify({
NODE_ENV: gutil.env.type === 'prod' ? 'production' : 'development',
__SHOW_RENDER__: gutil.env.type === 'debug' ? true : false
}));
});

var b = bBase.then(function(browserify) {
var b = gutil.env.type == 'prod' ? browserify : watchify(browserify);
b.on('update',bundle);
b.on('log',gutil.log);
return b;
.pipe(filter('**/*.css'));
});

gulp.task('clean',function() {
del.sync(['dist']);
})

gulp.task('browserify', bundle);

gulp.task('build', ['images','css-vendor','css-app','browserify','cp-prototypo.js','cp-genese','cp-static','cp-scripts']);

gulp.task('serve', ['images','css-vendor','css-app', 'browserify','cp-static'], function() {
browserSync.init({
server:['./dist','./node_modules'],
port:9000,
ghostMode:false
});
});

gulp.watch('./app/styles/**/*.scss',['css-app']);
gulp.watch('./dist/bundle.js',browserSync.reload);
gulp.task('webpack', function(callback) {
// run webpack
var prototypoConfig = Object.create(webpackConfig);
webpack(prototypoConfig,
function(err, stats) {
if(err) throw new gutil.PluginError("webpack", err);
gutil.log("[webpack]", stats.toString({
// output options
}));
callback();
}
);
});

gulp.task('test-serve', function() {
browserSync.init({
server:['./dist','./node_modules'],
port:9000,
ghostMode:false
gulp.task("webpack-dev-server",['clean', 'images','css-vendor','css-app','cp-prototypo.js','cp-genese','cp-static'], function(callback) {
// Start a webpack-dev-server
var prototypoConfig = Object.create(webpackConfig);
prototypoConfig.devtool = 'eval';
prototypoConfig.debug = true;
var compiler = webpack(prototypoConfig);

new WebpackDevServer(compiler, {
publicPath: webpackConfig.output.publicPath,
hot: true,
contentBase: 'dist/',
}).listen(9000, "0.0.0.0", function(err) {
if(err) throw new gutil.PluginError("webpack-dev-server", err);
// Server listening
gutil.log("[webpack-dev-server]", "http://localhost:9000/webpack-dev-server/index.html");

// keep the server alive or continue?
// callback();
});

gulp.watch('./app/styles/**/*.scss',['css-app']);
gulp.watch('./dist/bundle.js',browserSync.reload);

})

gulp.task('default',['serve']);
});
7 changes: 7 additions & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,10 @@
"xxhashjs": "^0.1.1"
},
"devDependencies": {
"babel-core": "^6.3.26",
"babel-loader": "^6.2.1",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"babelify": "^6.1.2",
"browser-sync": "^2.7.12",
"browserify": "^10.2.4",
Expand All @@ -57,11 +61,14 @@
"jshint-stylish": "~2.0.0",
"lodash.assign": "^3.2.0",
"merge-stream": "~0.1.7",
"react-hot-loader": "^1.3.0",
"surge": "^0.14.2",
"through": "^2.3.7",
"vinyl-buffer": "^1.0.0",
"vinyl-source-stream": "^1.1.0",
"watchify": "^3.2.2",
"webpack": "^1.12.9",
"webpack-dev-server": "^1.14.0",
"whatwg-fetch": "^0.9.0"
},
"engines": {
Expand Down
38 changes: 38 additions & 0 deletions webpack.config.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
var path = require('path');
var webpack = require('webpack');

module.exports = {
cache: true,
entry: [
'webpack-dev-server/client?http://0.0.0.0:9000', // WebpackDevServer host and port
'webpack/hot/only-dev-server', // "only" prevents reload on syntax errors
'./app/scripts/main'
],
output: {
path: path.join(__dirname, 'dist'),
publicPath: '',
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /\.jsx?$/,
preloaders: ['prelude-loader'],
loaders: ['react-hot-loader', 'babel-loader'],
include: [
path.join(__dirname, 'app'),
path.join(__dirname, '/node_modules/nexus-flux'),
path.join(__dirname, '/node_modules/remutable'),
path.join(__dirname, '/node_modules/lifespan')
]
}
],
noParse:/(levelup)|(prototypo-canvas)/
},
plugins: [
new webpack.HotModuleReplacementPlugin()
],
resolve: {
extensions: ['','.js', '.jsx']
}
}

0 comments on commit 3f44a22

Please sign in to comment.