boiler plate configuration having following features A task manager, A development server, A module bundler
In a typical frontend Development environment, it is typical for developers to have a boiler plate configuration to have a ready to start coding project setup, which would include the following features already built in for swift and clean build and testing
- A task manager with commonly used build tasks
- A development server which is spinned off once you start development
- A module bundler to convert your modular source code to a browser servable version.
- Gulp as the task manager
- Webpack as the module bundler and as the dev server
- Node package manager
Node installation comes with npm (node package manager)
$ node -v
v0.12.7
$ npm -v
2.11.3
$ mkdir MyAwesomeProject
$ cd MyAwesomeProject
$ npm init
$ npm install gulp --save-dev
$ npm install gulp-util --save-dev
$ npm install gulp-uglify --save-dev
$ npm install gulp-concat --save-dev
$ npm install gulp-sourcemaps --save-dev
Webpack is the more powerful evil cousin of Browserify. Additionally, it provides an option to spinoff a dev server in your desired port along with the capabilities of watching resources.
$ npm install webpack --save-dev
$ npm install webpack-dev-server --save-dev
$ npm install webpack-stream --save-dev //seamlessly integrate webpack with gulp
entry config is where you tell webpack where the flow starts in your webpage.
output config tells webpack to produce the transformed script in the desired path.
extensions is a config which tells webpack to automatically add matching extensions in the matching dependencies invoked in the source code. You can also give optional configs like cache, debug and devtool.
var path = require('path');
module.exports = {
cache: true,
debug: true,
devtool: 'eval',
entry: './src/app.js',
output: {
path: path.join(__dirname, "build"),
filename: 'build.min.js'
},
resolve: {
extensions: ['', '.js', '.json', '.coffee']
}
};
Get all the dependencies:
var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var sourcemaps = require('gulp-sourcemaps');
var gutil = require("gulp-util");
var webpack = require("webpack");
var WebpackDevServer = require("webpack-dev-server");
var webpackConfig = require("./webpack.config.js");
var stream = require('webpack-stream');
├── index.html
├── package.json
├── Gulpfile.js
├── webpack.config.js
├── src/**/*.js
└── app.js
└── module1.js
└── module2.js
├── images (all images stored here)
├── js (all js files stored here)
└── styles (all .less/.css files stored here)
var path = {
HTML: 'src/index.html',
ALL: ['src/**/*.jsx', 'src/**/*.js'],
MINIFIED_OUT: 'build.min.js',
DEST_SRC: 'dist/src',
DEST_BUILD: 'dist/build',
DEST: 'dist'
};
gulp.task('webpack', [], function() {
return gulp.src(path.ALL) // gulp looks for all source files under specified path
.pipe(sourcemaps.init()) // creates a source map which would be very helpful for debugging by maintaining the actual source code structure
.pipe(stream(webpackConfig)) // blend in the webpack config into the source files
.pipe(uglify())// minifies the code for better compression
.pipe(sourcemaps.write())
.pipe(gulp.dest(path.DEST_BUILD));
});
gulp.task("webpack-dev-server", function(callback) {
// modify some webpack config options
var myConfig = Object.create(webpackConfig);
myConfig.devtool = "eval";
myConfig.debug = true;
// Start a webpack-dev-server
new WebpackDevServer(webpack(myConfig), {
publicPath: "/" + myConfig.output.publicPath,
stats: {
colors: true
}
}).listen(8080, "localhost", function(err) {
if (err) throw new gutil.PluginError("webpack-dev-server", err);
gutil.log("[webpack-dev-server]", "http://localhost:8080/webpack-dev-server/index.html");
});
});
7.3 Now let's setup the watcher in Gulp which shall look for all changes in the statc resources and invoke the webpack instantly.
gulp.task('watch', function() {
gulp.watch(path.ALL, ['webpack']);
});
gulp.task('default', ['webpack-dev-server', 'watch']);
$ gulp
[14:56:10] Using gulpfile ~/Desktop/MyAwesomeProject/Gulpfile.js
[14:56:10] Starting 'webpack-dev-server'...
[14:56:10] Starting 'watch'...
[14:56:10] Finished 'watch' after 9.52 ms
[14:56:10] [webpack-dev-server] http://localhost:8080/webpack-dev-server/index.html
Hash: 154fd7d206186335ec46
Version: webpack 1.10.5
Time: 252ms
Asset Size Chunks Chunk Names
build.min.js 281 kB 0 [emitted] main
chunk {0} build.min.js (main) 248 kB [rendered]
[0] ./src/app.js 374 bytes {0} [built]
[1] ./~/jquery/dist/jquery.js 248 kB {0} [built]
webpack: bundle is now VALID.
References: