Skip to content
This repository was archived by the owner on Feb 17, 2024. It is now read-only.

Commit b771f07

Browse files
dantharejadanthareja
committed
init(solution)
1 parent df784dc commit b771f07

File tree

6 files changed

+187
-0
lines changed

6 files changed

+187
-0
lines changed

‎client/app.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import greeting from './content';
2+
// We can use any ES6 syntax supported by Babel here now!
3+
alert(`${greeting} and with ES6!`)

‎client/content.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export default 'It works from content.js'

‎client/index.html

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<html>
2+
<head>
3+
<meta charset="UTF-8">
4+
</head>
5+
<body>
6+
<script src="bundle.js"></script>
7+
</body>
8+
</html>

‎gulpfile.js

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
/*
2+
* This is the heart of Gulp. Here we define and compost tasks together
3+
*
4+
* Gulp runs on plugins!
5+
* If you want to automate anything, run an `npm search`
6+
* for `gulp-whatever` and chances are you'll find it.
7+
*/
8+
9+
var gulp = require('gulp'),
10+
sync = require('run-sequence'),
11+
serve = require('browser-sync'),
12+
/* START SOLUTION */
13+
webpack = require('gulp-webpack');
14+
/* END SOLUTION */
15+
16+
/*
17+
* A convenience object to hold different paths we care about.
18+
*
19+
* This 'glob' notation is a nice wildcard notation for paths that is common in gulp tasks.
20+
* This glob says: watch for any .js, .css, or .html file at any level in our 'client' directory
21+
*/
22+
var paths = {
23+
app: ['client/**/*.{js,css,html}']
24+
};
25+
26+
/* START SOLUTION */
27+
/*
28+
* Gulp is built ontop of node's powerful 'stream' concepts.
29+
* You can think of a stream as faucet of water that flows through different 'pipes'
30+
* We open the gulp faucet by passing a glob of files into gulp.src.
31+
* Then we can 'pipe' these files through all sorts of different transformations,
32+
* each one returning its own stream that can continue to be piped into more transformations.
33+
*
34+
* Here, we're grabbing the entry point to our (making the `entry` property in webpack.config.js unnecessary),
35+
* piping the entry into webpack plugin, bundling our app, and piping that into the client folder designated by gulp.dest
36+
*
37+
* NOTE: gulp.dest defines our webpack's output folder. Webpack will get mad if it finds an output.path property
38+
* in webpack.config.js. We still need `filename` though.
39+
*/
40+
gulp.task('build', function() {
41+
return gulp.src('./client/app.js')
42+
.pipe(webpack(require('./webpack.config.js')))
43+
.pipe(gulp.dest('client'));
44+
});
45+
/* END SOLUTION */
46+
47+
/*
48+
* Browsersync manages a server that plays nicely with gulp (see serve.reload below)
49+
* NOTE: server.baseDir should be a directory that contains `index.html`
50+
*/
51+
gulp.task('serve', function() {
52+
serve({
53+
port: 3000,
54+
open: false,
55+
server: {
56+
baseDir: 'client'
57+
}
58+
});
59+
});
60+
61+
/*
62+
* Gulp also has the power to watch your files for any changes, and run a command whenever one changes.
63+
* It doesn't even need a plugin. Let's do it!
64+
*
65+
* This task says: If any files in our app glob change, re-build the whole thing, and then reload the server
66+
*/
67+
gulp.task('watch', function() {
68+
gulp.watch(paths.app, ['build', serve.reload]);
69+
});
70+
71+
/*
72+
* A gulp task can consist of many other gulp tasks.
73+
* By default, tasks passed in using array notation (like `[serve.reload]` above) run in series,
74+
* not guaranteeing any order of completion, and causing a race condition.
75+
*
76+
* Sometimes this is not wanted. For example, if we want to fully transpile all our ES6 code into ES5
77+
* before it is served, we need to guarantee the entire build step is completed before the serve task.
78+
*
79+
* `run-sequence` is a nice plugin that lets us run gulp tasks in series instead of parallel.
80+
*
81+
* Now whenever we run `gulp`, it will run the `build` command in its entirety,
82+
* the `serve` command in its entirety, then `watch` in its entirety,
83+
* and then invoke the `done` callback to let gulp know all asyncronous tasks have been completed.
84+
*/
85+
gulp.task('default', function(done) {
86+
sync(/*START SOLUTION*/'build'/*END SOLUTION*/, 'serve', 'watch', done);
87+
});

‎package.json

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
{
2+
"name": "ES6-build-tools",
3+
"version": "1.0.0",
4+
"description": "A comprehensive walkthrough setting up an ES6 environment with exercises to practice building your own",
5+
"main": "client/app.js",
6+
"dependencies": {
7+
},
8+
"devDependencies": {
9+
"babel-core": "^5.6.7",
10+
"babel-loader": "^5.1.4",
11+
"browser-sync": "^2.7.12",
12+
"gulp": "^3.9.0",
13+
"gulp-webpack": "^1.5.0",
14+
"run-sequence": "^1.1.1",
15+
"webpack": "^1.9.12"
16+
},
17+
"scripts": {
18+
"test": "echo \"Error: no test specified\" && exit 1"
19+
},
20+
"author": "Dan Thareja <danthareja@gmail.com>",
21+
"license": "MIT"
22+
}

‎webpack.config.js

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
/* START SOLUTION */
2+
/*
3+
* This is where we tell Webpack exactly what we want it to do.
4+
*
5+
* We need to define three options to make our Webpack work:
6+
* 1) Where our app starts (entry)
7+
* 2) Where our bundle should be created (output)
8+
* 3) What we want to do with the files in our app (module.loaders)
9+
*/
10+
11+
module.exports = {
12+
/*
13+
* Organizing our code in modules is a bit different than the traditional style.
14+
* Gone are the days of endless <script> tags in index.html that must be carefully ordered.
15+
* Instead, our `entry` point defines where our app starts. It's here where we'll import
16+
* all other files as needed, and Webpack manages the tree of dependencies automagically.
17+
*
18+
* If you've ever used node, your app's entry point is conventionally `index.js`
19+
*/
20+
// entry: './client/app.js', (unnecessary with gulp - gulp.src does this for us)
21+
22+
/*
23+
* Not only will Webpack gracefully manage the tree of dependencies for us, it can also
24+
* smash all the dependencies into one convenient file that we can send over the wire.
25+
* This is similar to minification. The `output` object defines where this minified file should live
26+
*/
27+
output: {
28+
// path: __dirname + '/client', // Absolute (!) path for our output file (unnecessary with gulp - gulp.dest does this for us)
29+
filename: 'bundle.js', // `bundle.js` is a typical convention for Webpack
30+
},
31+
32+
/*
33+
* Bundles are all fun and games until you have to debug them. It's not easy
34+
* sorting through one giant file of transpiled ES5 code to see where you went wrong.
35+
*
36+
* Sourcemaps are an invaluable tool when debugging. They map your bundle to your
37+
* source files and allow you to trace errors in your bundle back to the code you
38+
* actually wrote. You should always use source maps when developing with a transpiler.
39+
*/
40+
devtool: 'sourcemap', // Will be created at './client/app/bundle.js.map'
41+
42+
/*
43+
* This is where most of magic happens. Webpack loaders allow you to preprocess files as you import them.
44+
* They are kind of like 'tasks' in other build tools. In fact, if you are using another build tool
45+
* like gulp or grunt along with Webpack, you should leave any task that touch files
46+
* (transpilation, minification, etc) to Webpack and use your other build system to orchastrate other automation.
47+
*
48+
* Loaders can tranform files from a different language (TypeScript to JavaScript or ES6 to ES5!)
49+
* Loaders even allow you to do things like import css files right in your JavaScript!
50+
51+
* Each loader is just an object that defines (1) a collection of files (2) the transformation.
52+
* Here's how the properties work:
53+
* test: A condition that must be met (regex)
54+
* loader: A string of "!" separated loaders (these are executed from right to left)
55+
* include: A condition that must be met (not included, but reges)
56+
* exclude: A condition that must not be met (regex)
57+
*/
58+
module: {
59+
loaders: [
60+
{ test: /\.js$/, loader: 'babel', exclude: [/node_modules/]}, // Transpile our .js from ES6 to ES5
61+
{ test: /\.html$/, loader: 'raw' }, // 'raw' will import our html as a string - great for Angular templates!
62+
{ test: /\.css$/, loader: 'style!css' } // 'css' loader will parse our stylesheets, and 'style' loader will inject it into the <head> of our index.html
63+
]
64+
}
65+
};
66+
/* END SOLUTION */

0 commit comments

Comments
 (0)