gulp
.
task
(
'default'
,
function
() {
// Gulp tasks go here
});
We haven’t actually configured Gulp to do anything yet, but we can verify that Gulp
can run successfully now:
$
gulp
[
16
:
16
:
28
]
Using
gulpfile
/
home
/
joe
/
work
/
lj
/
gulpfile
.
js
[
16
:
16
:
28
]
Starting
'default'
...
[
16
:
16
:
28
]
Finished
'default'
after
68
μs
If you’re a Windows user, you may get the error “The build tools
for Visual Studio 2010 (Platform Toolset = v100) cannot be found.”
Many npm packages have a dependency on Visual Studio build
tools. You can get a free version of Visual Studio from
. Once you’ve installed Visual Studio, look for
“Developer Command Prompt” in your program files. In that com‐
mand prompt, navigate to your project root and try to install Gulp
again, and you should have better luck. You don’t need to continue
using the Visual Studio Developer Command Prompt, but it’s the
easiest way to install npm modules that have dependencies on
Visual Studio.
Project Structure
Before we use Gulp and Babel to convert our ES6 code to ES5, we need to think about
where we’re going to put our code within our project. There’s no one universal stan‐
dard for project layout in JavaScript development: the ecosystem is just too diverse
for that. Very commonly, you’ll see source code in src or js directories. We’re going to
put our source in es6 directories, to make it perfectly clear that we’re writing ES6
code.
Because many projects include both server-side (Node) code and client-side
(browser) code, we’re going to separate these two categories as well. Server-side code
will simply go in the es6 directory in our project root, and code destined for the
browser will go in public/es6 (by definition, any JavaScript sent to the browser is pub‐
lic, and this is a very common convention).
In the next section, we’ll take our ES6 code and convert it to ES5, so we’ll need a place
to put that ES5 code (we don’t want to mix it in with ES6 code). A common conven‐
tion is to put that code in a directory called dist (for “distribution”).
Putting it all together, your project root will look something like this:
.git # Git
.gitignore
24 | Chapter 2: JavaScript Development Tools
