Because I spent too much time redoing my gulp tasks, I make this to work with a unique configuration file written in YAML.
The project is inspired by Blendid (formerly known as Gulp Starter).
See changes in CHANGELOG
Here's how all the tasks run:
With this organisation, you can chain some process. For example, you can bundle your scripts with Browserify or Webpack and pass it to default Javascript task. Another example concern images, you can build sprites and optimize it by passing it to images task.
Install gulpfile.js:
npm init
npm install gulpfile.js --save-dev --save-exact
npx gulpfile.js
Create configuration files:
touch gulpconfig.yml
touch .eslintrc
Start gulpfile.js:
npx gulpfile.js
npx gulpfile.js
This is where the magic happens. The perfect front-end workflow. This runs the development task, which starts compiling, watching, and live updating all our files as we change them. Browsersync will start a server on port 3000, or do whatever you've configured it to do. You'll be able to see live changes in all connected browsers.
npx gulpfile.js [task] [options...]
- task: the name of the task to start. It could be global (
lint
,build
orwatch
) or more specific likesass
,sass:build
orsass:public:build
. - options:
--config-file=YAML change the configuration file used if there were none in the
current directory.
--no-favicon disable favicon generation to save time on build.
--no-lint disable lint tasks.
--revision[=JSON] generate JSON with list of genereated files and some hash.
--sourcemaps generate inline sourcemaps.
--sourcemap-files generate external sourcemap files.
npx gulpfile.js build
Compiles files to your destination directory.
It's a good idea to add aliases for these commands to your package.json scripts object.
package.json:
{
"scripts": {
"start": "npx gulpfile.js",
"build": "npx gulpfile.js build"
}
}
Command line:
npm start
npm run build
Except for browsersync, all section define a set of tasks build on the same template. Each section define 2 entries:
- tasks: list of tasks
- settings: global override of task settings
For each tasks, you can override settings globally or for the task only. All options is detailed below.
Delete directories or files.
Template:
clean:
files:
- "dist/"
- "src/sass/helpers/*.scss"
Override default settings and watch files not watched by other tasks.
Template:
browsersync:
settings:
server:
baseDir: "build/"
watch:
- "**/*.html"
In this configuration, files in build
directory will by served at
http://localhost:3000 and all changes on HTML file will reload the browser. You
can proxy an existing website as written below:
browsersync:
settings:
proxy: "http://website"
Related documentation:
Build PUG files into HTML. In the template below, one task called public
is
defined and compile all PUG files in directory assets/views
in HTML file
stored in build
. You can pass data to PUG with data
settings.
Template:
pug:
tasks:
public:
src:
- "assets/views/**/*.pug"
dst: "build"
settings:
data: "pugdata.yml"
Build SASS files into CSS. In the template below, one task called public
is
defined and compile all SASS files in directory assets/sass
in HTML file
stored in build/css
. You can override settings of SASS and autoprefixer. It's
also possible to extract media queries and critical styles into separate files.
Template:
sass:
tasks:
public:
src:
- "assets/sass/**/*.scss"
dst: "build/css"
settings:
sass:
errLogToConsole: true
mqpacker:
sort: "desktop"
inlineSVG:
path: "assets/"
extractMQ: true
critical: true
purgeCSS: true
Related documentation:
Concatenate multiple Javascript files into one. In the template below, one task
called public
is defined and concatenate all Javascript files in directory
assets/js
in two files (app.js and app.min.js) stored in build/js
. You can
override settings of Babel using .babelrc
file.
Template:
javascript:
tasks:
public:
src:
- "assets/js/*.js"
dst: "build/js"
filename: "app.js"
Related documentation:
Package javascript files into one file. In the template below, one task called
public
is defined and package javascript files with entrypoint defined by
src
in two files (app.js and app.min.js) stored in build/js
. You can
override settings of Browserify and Babel.
Template:
browserify:
tasks:
public:
src: "assets/js/app.js"
dst: "build/js"
filename: "app.js"
settings:
eslint: ".eslintrc"
Related documentation:
Package javascript files into one file. In the template below, one task called
public
is defined and package javascript files with entrypoint defined by
src
in two files (app.js and app.min.js) stored in build/js
. You can
override settings of Browserify, Babel and ESLint.
Template:
webpack:
tasks:
public:
src: "assets/js/app.js"
watch:
- "assets/js/**/*.js"
dst: "build/js"
filename: "app.js"
settings:
babel:
sourceType: "module"
Related documentation:
Package TypeScript files into one javascript file. In the template below, one
task called public
is defined and package TypeScript files with entrypoint
defined by src
in two files (app.js and app.min.js) stored in build/js
.
You can override settings of Browserify, Babel and ESLint.
typescript:
tasks:
public:
src: "assets/typescript/app.ts"
watch:
- "assets/typescript/**/*.ts"
dst: "build/js"
filename: "app.js"
settings:
eslint:
configFile: ".eslintrc-ts"
ignorePath: ".eslintignore-ts"
Related documentation:
Minify images with imagemin. In
the template below, one task called public
is defined and optimize all images
in directory assets/images
and store them in build/images
. You can override
settings of imagemin.
Template:
images:
tasks:
public:
src:
- "assets/images/**/*.png"
- "assets/images/**/*.jpg"
- "assets/images/**/*.jpeg"
- "assets/images/**/*.gif"
- "assets/images/**/*.svg"
dst: "build/images"
settings:
webp: true
Related documentation:
Convert a set of images into a spritesheet and CSS variables. The two templates
below show the two way to define sprites: first one is normal method, the second
is for retina configuration. All images in assets/sprites
will be converted in
a sprite stored in build/images
. The name of the task define the name of the
sprite file but you can add a prefix. SASS file is build in assets/sass/sprites
.
You can override settings of imagemin.
Template:
sprites:
tasks:
icon:
src:
- "assets/sprites/*.png"
- "assets/sprites/*.jpg"
dst: "build/images"
settings:
sass:
dst: "assets/sass/sprites"
rel: "../images"
prefix: "icon"
sprites:
tasks:
icon:
src-1x:
- "assets/sprites/*.png"
- "assets/sprites/*.jpg"
src-2x:
- "assets/sprites/*@2x.png"
- "assets/sprites/*@2x.jpg"
dst: "build/images"
settings:
sass:
dst: "assets/sass/sprites"
rel: "../images"
prefix: "icon"
Related documentation:
Convert a set of SVG file in font files like FontAwesome or Foundation. In the
template below, one task called custom
is defined and convert all SVG in
directory assets/svg
and store font files in build/fonts
and SASS file in
assets/sass/fonts
. In default behavior, the icons was named
icon-{name-of-task}-{name-of-svg}
. You can change the default prefix by any
value in settings. In this case, the name of each icon is
{prefix}-{name-of-task}-{name-of-svg}
. If you define an empty prefix, the
name become {name-of-task}-{name-of-svg}
.
Template:
fonts:
tasks:
custom:
src:
- "assets/svg/*.svg"
dst: "build/fonts"
settings:
sass:
dst: "assets/sass/fonts"
rel: "../fonts"
prefix: "font"
settings:
template: "fontawesome"
Related documentation:
Combine multiple SVG into one. It could be used as a sprite of SVG. In the
template below, one task called icon
is defined to combine all SVG files in
the directory assets/svg
into one file called icons.svg
located in
build/images
. In default behavior, the icons was named
icon-{name-of-svg}
. You can change the default prefix by any
value in settings. In this case, the name of each icon is
{prefix}-{name-of-svg}
. If you define an empty prefix, the name become
{name-of-svg}
.
** Template:**
svgstore:
tasks:
icons:
src:
- "assets/svg/*.svg"
dst: "build/images"
filename: "icons.svg"
settings:
prefix: "icon"
Related documentation:
** Template **
revision: "build/rev-manifest.json"
** Result **
{
"sass": {
"public": {
"app.css": {
"md5": "63d00699ad1c641c27c5fa8488c90143",
"revRelFile": "app.css",
"sha1": "c997a7fd7d5ce37a2b1b132c7b0989af67a900a3",
"sha256": "cf79d6c88f27aa05c84f71f6e6e3bfc27b7606aca905204786c52a4d0400c256"
}
}
}
}
Gulp tasks! Built combining the following:
Feature | Packages Used |
---|---|
Live Updating | browsersync |
Pug | gulp-pug, gulp-data, gulp-pug-linter |
SASS | gulp-sass, Sass, gulp-postcss, autoprefixer, postcss-assets, postcss-inline-svg, postcss-svgo, postcss-purgecss, rucksack, CSS MQPacker, cssnano, gulp-sass-lint |
JavaScript | gulp-concat, gulp-babel, gulp-terser, gulp-eslint |
Browserify | browserify, babelify, gulp-terser, gulp-eslint |
Webpack | webpack-stream, webpack, babelify, gulp-terser, gulp-eslint |
TypeScript | browserify, tsify, typescript, babelify, gulp-terser, gulp-eslint |
Images | gulp-imagemin, imagemin-webp |
Sprites | gulp.spritesmith |
Fonts | gulp-iconfont |
SVG store | gulp-svgstore, gulp-svgmin |