Make sure these are installed first.
- Node.js
- Gulp Command Line Utility
npm install --global gulp-cli
Note: if you've previously installed Gulp globally, run npm rm --global gulp
to remove it.
- In bash/terminal/command line,
cd
into your project directory. - Run
npm install
to install required files and dependencies. - When it's done installing, run one of the task runners to get going:
gulp
manually compiles files into/public/
directorygulp watch
automatically compiles files and applies changes using BrowserSync when you make changes to your source files.
Add your source files to the appropriate src
subdirectories. Gulp will process and and compile them into public
.
- JavaScript files in the
src/js
directory will be compiled topublic/js
. Files in subdirectories under thejs
folder will be concatenated. - CSS files in the
src/sass
directory will be compiled topublic/css
. - SVG files placed in the
src/svg
directory will be optimized with SVGO and compiled intopublic/svg
. - Files and folders placed in the
copy
directory will be copied as-is into thepublic
directory.
Note: devDependencies
are the dependencies Gulp uses. Don't change these or you'll break things.
- The
package.json
file holds all of the details about your project. Some information is automatically pulled in from it and added to a header that's injected into the top of your JavaScript and CSS files. - Put your JavaScript files in the
src/js
directory. Files placed directly in thejs
folder will compile directly topublic/js
as both minified and unminified files. Files placed in subdirectories undersrc/js
will also be concatenated into a single file. - Put your Sass files in the
src/sass
directory. Gulp generates minified and unminified CSS files. It also includes autoprefixer, which adds vendor prefixes for you. - Place SVG files in the
src/svg
directory. - SVG files will be optimized with SVGO and compiled into
public/svg
. - Files and folders placed in the
src/copy
directory will be copied as-is intopublic
. This is a great place to put HTML files, images, and pre-compiled assets.
- Concatenate, minify, and lint JavaScript.
- Compile, minify, autoprefix, and lint Sass.
- Optimize SVGs.
- Copy static files and folders into your
public
directory. - Automatically add headers and project details to JS and CSS files.
- Create polyfilled and non-polyfilled versions of JS files.
- Watch for file changes, and automatically recompile build and reload webpages.