gulpfile.js
v3.2.5Deprecated
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
Because I spent too much time redoing my gulp tasks.
0/weekUpdated 3 years agoMITUnpacked: 1.0 MB
Published by cjacquesson
npm install gulpfile.js!GitHub top language
!npm
!David
!David
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)_.
Changes
See changes in CHANGELOG
Execution graph
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.
Quick start on a fresh project (empty directory)
Install gulpfile.js:
``bash`
npm init
npm install gulpfile.js --save-dev --save-exact
npx gulpfile.js
Create configuration files:
`bash`
touch gulpconfig.yml
touch .eslintrc
Start gulpfile.js:
`bash`
npx gulpfile.js
Commands
`bash`
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.
$3
`bash`
npx gulpfile.js [task] [options...]
- task: the name of the task to start. It could be global (lint, build orwatch) or more specific like sass, sass:build or sass:public:build.`
- options:bash`
--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.
$3
`bash`
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:
`json`
{
"scripts": {
"start": "npx gulpfile.js",
"build": "npx gulpfile.js build"
}
}
Command line:
`bash`
npm start
npm run build
Configuring tasks
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.
$3
Delete directories or files.
Template:
`yaml`
clean:
files:
- "dist/"
- "src/sass/helpers/*.scss"
$3
Override default settings and watch files not watched by other tasks.
Template:
`yaml`
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:
`yaml`
browsersync:
settings:
proxy: "http://website"
Related documentation:
$3
Build PUG files into HTML. In the template below, one task called public isassets/views
defined and compile all PUG files in directory in HTML filebuild
stored in . You can pass data to PUG with data settings.
Template:
`yaml`
pug:
tasks:
public:
src:
- "assets/views/*/.pug"
dst: "build"
settings:
data: "pugdata.yml"
$3
Build SASS files into CSS. In the template below, one task called public isassets/sass
defined and compile all SASS files in directory in HTML filebuild/css
stored in . You can override settings of SASS and autoprefixer. It's
also possible to extract media queries and critical styles into separate files.
Template:
`yaml`
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:
- Sass
- autoprefixer
- postcss-assets
- postcss-inline-svg
- postcss-purgecss
- rucksack
- CSS MQPacker
$3
Concatenate multiple Javascript files into one. In the template below, one task
called public is defined and concatenate all Javascript files in directoryassets/js in two files (app.js and app.min.js) stored in build/js. You can.babelrc
override settings of Babel using file.
Template:
`yaml`
javascript:
tasks:
public:
src:
- "assets/js/*.js"
dst: "build/js"
filename: "app.js"
Related documentation:
- Babel
$3
Package javascript files into one file. In the template below, one task called
public is defined and package javascript files with entrypoint defined bysrc in two files (app.js and app.min.js) stored in build/js. You can
override settings of Browserify and Babel.
Template:
`yaml`
browserify:
tasks:
public:
src: "assets/js/app.js"
dst: "build/js"
filename: "app.js"
settings:
eslint: ".eslintrc"
Related documentation:
- Browserify
- Babel
$3
Package javascript files into one file. In the template below, one task called
public is defined and package javascript files with entrypoint defined bysrc in two files (app.js and app.min.js) stored in build/js. You can
override settings of Browserify, Babel and ESLint.
Template:
`yaml`
webpack:
tasks:
public:
src: "assets/js/app.js"
watch:
- "assets/js/*/.js"
dst: "build/js"
filename: "app.js"
settings:
babel:
sourceType: "module"
Related documentation:
$3
Package TypeScript files into one javascript file. In the template below, one
task called public is defined and package TypeScript files with entrypointsrc
defined by in two files (app.js and app.min.js) stored in build/js.
You can override settings of Browserify, Babel and ESLint.
`yaml`
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:
- TypesSript
- Babel
$3
Minify images with imagemin. In
the template below, one task called public is defined and optimize all imagesassets/images
in directory and store them in build/images. You can override
settings of imagemin.
Template:
`yaml`
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:
- gulp-imagemin
- imagemin-webp
$3
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 inbuild/images
a sprite stored in . The name of the task define the name of theassets/sass/sprites
sprite file but you can add a prefix. SASS file is build in .
You can override settings of imagemin.
Template:
`yaml`
sprites:
tasks:
icon:
src:
- "assets/sprites/*.png"
- "assets/sprites/*.jpg"
dst: "build/images"
settings:
sass:
dst: "assets/sass/sprites"
rel: "../images"
prefix: "icon"
`yaml`
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:
$3
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 inassets/svg
directory and store font files in build/fonts and SASS file inassets/sass/fonts. In default behavior, the icons was namedicon-{name-of-task}-{name-of-svg}. You can change the default prefix by any{prefix}-{name-of-task}-{name-of-svg}
value in settings. In this case, the name of each icon is. If you define an empty prefix, the{name-of-task}-{name-of-svg}
name become .
Template:
`yaml`
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:
- iconfont
$3
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 inassets/svg
the directory into one file called icons.svg located inbuild/images. In default behavior, the icons was namedicon-{name-of-svg}. You can change the default prefix by any{prefix}-{name-of-svg}
value in settings. In this case, the name of each icon is. If you define an empty prefix, the name become{name-of-svg}.
Template:
`yaml`
svgstore:
tasks:
icons:
src:
- "assets/svg/*.svg"
dst: "build/images"
filename: "icons.svg"
settings:
prefix: "icon"
Related documentation:
- svstore
$3
Template
`yaml`
revision: "build/rev-manifest.json"
Result
`json``
{
"sass": {
"public": {
"app.css": {
"md5": "63d00699ad1c641c27c5fa8488c90143",
"revRelFile": "app.css",
"sha1": "c997a7fd7d5ce37a2b1b132c7b0989af67a900a3",
"sha256": "cf79d6c88f27aa05c84f71f6e6e3bfc27b7606aca905204786c52a4d0400c256"
}
}
}
}
What's under the hood?
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 |