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.jsCreate configuration files:
touch gulpconfig.yml
touch .eslintrcStart gulpfile.js:
npx gulpfile.jsnpx gulpfile.jsThis 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,buildorwatch) or more specific likesass,sass:buildorsass: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 buildCompiles 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 buildExcept 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: trueRelated 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: trueRelated 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 |