README.md

DESCRIPTION

This is a default project using Gulp 4. For better development performance, some processing libraries are already configured for me. Make the modifications to better serve you.

REQUIREMENTS

nodejs yarn

INSTALLATION

Use the package manager npm or yarn.

npm install --global gulp-cli

yarn install
# or
npm install

GULP 4

1 - The package.json file contains all used libraries.

2 - The gulp folder has all tasks. If you need to change or add new tasks, do it here.

3 - The src folder has all files to be compiled.

4 - The assets folder is the directory where the compiled files will be saved.

5 - The Gulpfile.js file has registered tasks.

LINTERS

ESLINT gulp-eslint

The ESLINT settings are being provided by the .eslintrc.js file.

const eslint = require('./gulp/eslint');
/*
eslint (
  #1 Source js files
);
*/
exports.eslint = eslint(...);
//use
gulp eslint

output:

SASSLINT gulp-sass-lint

The SASSLINT settings are being provided by the .scss-lint.yml file.

const scsslint = require('./gulp/scsslint');
/*
scsslint (
  #1 Source js files,
  #2 config object
    {
      options: {
        ...
      },
      configFile: _d('.scss-lint.yml')
    }
);
*/
exports.scsslint = scsslint(...);
//use
gulp scsslint

output:

ICON FONT

ICON FONT gulp-iconfont

const iconfont = require('./gulp/iconfont');
/*
iconfont (
  #1 Dource files,
  #2 Dist fonts,
  #3 Source template generate pewview,
  #4 Scss dist
  #5 Relative path to use in src: url(#5/font.{ttf,svg.woff...})
);
*/
exports.iconfont = iconfont(...);
//use
gulp iconfont

In the gulp / iconfont.js file you will find all settings for generating the icon font.

In the src / templates / font-icon.template file you can configure the scss output.

The icon source is pre-defined for 'ttf', 'eot', 'woff', 'woff2', 'svg'.

The font name is pre-defined for "Icons". To modify, look for the variable FONT_NAME in the file gulp / iconfont.js.

ICON FONT CSS gulp-iconfont-css

const iconfontcss = require('./gulp/iconfontcss');
/*
iconfont (
  #1 Source files,
  #2 Dist fonts
);
*/
exports.iconfontcss = iconfontcss(...);
//use
gulp iconfontcss

The gulp / iconfontcss.js task will compile scss to css.

The gulp / template.js task will compile an html page to preview the icons.

To preview, visit assets / preview-icon-fonts.html

JS

SOURCEMAPS gulp-sourcemaps

BABEL gulp-babel

UGLIFY gulp-uglify

const js = require('./gulp/js');
/*
js (
  #1 Source files,
  #2 Dist fonts
);
*/
exports.js = js(...);
//use
gulp js

JS CONCAT

CONCAT gulp-concat

const jsconcat = require('./gulp/jsconcat');
/*
jsconcat (
  #1 Source files,
  #2 Dist
);
*/
exports.jsconcat = jsconcat(...);
//use
gulp jsconcat

SCSS

SOURCEMAPS gulp-sourcemaps

SASS gulp-sass

const scss = require('./gulp/scss');
/*
scss (
  #1 Source files,
  #2 Dist fonts
);
*/
exports.scss = scss(...);
//use
gulp scss

IMAGEMIN

IMAGEMIN gulp-imagemin

const imagemin = require('./gulp/imagemin');
/*
imagemin (
  #1 Source files,
  #2 Dist
);
*/
exports.imagemin = imagemin(...);
//use
gulp imagemin

TEMPLATE

TEMPLATE gulp-template

const template = require('./gulp/template');
/*
template (
  #1 Source files,
  #2 Dist
);
*/
exports.template = template(...);
//use
gulp template

SPRITE

SPRITESMITH gulp.spritesmith

const sprite = require('./gulp/sprite');
/*
sprite (
  #1 Source sprite icons,
  #2 Dist scss,
  #3 Dist image
);
*/
exports.sprite = sprite(...);
//use
gulp sprite

WATCH

The task watch is responsible for listening to the files and running the compilers automatically.

exports.watch = () => {
  // Add your watch here
  watch('./src/**/*', task);
  // or
  watch('./src/**/*', series(task, task2, task3));
  // or
  watch('./src/**/*', parallel(task, task2, task3));
}
//use
gulp watch

DEFAULT

The default task runs to compile the files and listen to the changes at the end.

exports.default = parallel(
  series(
    series(
      exports.iconfont,
      exports.iconfontcss,
      exports.sprite,
      exports.imagemin
    ),
    parallel(
      exports.scss,
      exports.scssbuild
    )
  ),
  exports.template,
  parallel(
    exports.js,
    exports.jsbuild
  )
);
//use
gulp