Gulpflow Starter

Gulpflow Starter is a basic boilerplate to start a gulp front-end project with scss, babel, linter and images optimisation.

Dependencies

Make sure the following are installed first:

Node.Js
Gulp Command Line Utility

Installation

Add this repository as one of your project dependencies.

npm install git://github.com/essomia/gulpflow-starter.git

Set your project to use the boilerplate within the gulpfile.js file.

const boilerplate = require('@essomia/gulpflow-starter')();

Now, you can run gulp build to build project from sources folder to destinations folder with the default configuration.

Configuration

All default configuration are written in ./gulpflow/index.js: conditional compilation, source paths and tasks list.

If you need to configure your own workflow, adjust your gulpfile.js file and pass your custom configuration to the boilerplate.

Below you have an example of custom configuration:

const customConfig = {
    /**
     * Main path for sources and destinations folder.
     */
    root: {
        src: './src/',
        dest: './build/'
    },

    /**
     * Conditional configuration for project.
     */
    ifs: {
        doLinter: true,
        doMinify: true,
        doSourcemaps: false
    },

    /**
     * Main linters files.
     */
    linters: {
        eslint: `./.eslintrc.yaml`,
        stylelint: `./.stylelintrc.yaml`
    },

    /**
     * List sources folders for specific task.
     *
     * @note Following format {key}:{value}
     *   @var {key}   - Task name from `./gulpflow/tasks/` folder.
     *   @var {value} - Array|String of all path to look for files.
     */
    sources: {
        css: 'components/**/assets/raw/**/*.css',
        fonts: 'components/**/assets/fonts/**/*.{eot,svg,ttf,woff,woff2}',
        html: 'components/**/assets/raw/**/*.html',
        images: 'components/**/assets/images/**/*.{jpg,jpeg,png,gif,svg}',
        js: 'components/**/js/**/*.js',
        json: 'components/**/assets/raw/**/*.json',
        scss: 'components/**/scss/**/*.{sass,scss}'
    },

    /**
     * List destinations folders for specific task.
     *
     * @note Following format {key}:{value}
     *   @var {key}   - Task name from `./gulpflow/tasks/` folder.
     *   @var {value} - Array|String of all path to look for files.
     */
    destinations: {
        css: 'css/',
        fonts: 'fonts/',
        html: 'templates/',
        images: 'images/',
        js: 'scripts/',
        json: 'json/',
        scss: 'styles/'
    },

    /**
     * Main tasks to run.
     *
     * @note Following format {key}:{value}
     *   @var {key}   - Task name from `./gulpflow/core/` folder.
     *   @var {value} - Array of all tasks from `./gulpflow/tasks/` folder to run.
     */
    tasks: {
        watch: ['js', 'scss'],
        build: ['html', 'css', 'json', 'fonts', 'images', 'js', 'scss']
    }
};

const boilerplate = require('@essomia/gulpflow-starter')(customConfig);

Tasks

This is the full list of tasks available, that you can use in a project.

All available tasks are placed in the folder ./gulpflow/ as separate *.js files and since we use the CommonJS modules format, usually, a filename equal a task name.

Core tasks

Task name	Description
`build`	Compile entire project (assets + styles + scripts) to destinations.
`clean`	Remove destinations files of the project.
`watch`	Watch sources files of project for modifications.

Files tasks

Task name	Description
`css`	Optimize `.css` with autoprefixer & cssnano.
`fonts`	Copy `.eot/.svg/.ttf/.woff/.woff2`
`html`	Optimize `.html` with htmlmin.
`images`	Optimize `.jpg/.jpeg/.png/.gif/.svg` with imagemin.
`js`	Optimize `.js` with uglify and include + Lint files with babel and eslint.
`json`	Optimize `.json` with jsonminify.
`scss`	Compile `.sass/.scss` to `.css` with sass, autoprefixer & cssnano + Lint files with stylelint.

Folders structure

The default supported sources folders structures is:

/example/src
    /components
        /<component_name>
        /assets
            /fonts
            /images
            /raw
        /js
        /scss

And that will be compiled to destinations:

/example/app
    /css/<component_name>
    /fonts/<component_name>
    /images/<component_name>
    /json/<component_name>
    /scripts/<component_name>
    /styles/<component_name>
    /templates/<component_name>

Essomia/gulpflow-starter