Nobody Publish Monsters


    0.5.3 • Public • Published

    joes-gulp-tasks - An Accessible Gulp 4 Package


    Writing your own gulp pipelines isn't always easy. Wouldn't be nice to automate all your front-end develop tasks with a straight forward configuration file? Gulp task management that is flexible, but accessible. This package is an attempt to bring powerful gulp tasks to any project, quickly and hopefully painlessly.

    This module is currently under active development. If you would like to contribute, feel free to open issues and create pull requests on GitHub. Thanks!

    More coming soon...


    Note: If you have previously install gulp using npm install --global gulp, you will need to uninstall and install the Gulp Cli. See GulpJs for more information.

    Getting Started/Installation

    1. Install gulp 4 - npm install gulpjs/gulp.git#4.0 --save-dev

    2. Install Joe's Gulp Tasks - npm install joe-gulp-tasks --save-dev

    3. Open the newly created ./gulpconfig.js file and set the configurations to match the directory structure of your project. Toggle the settings as you see fit.

    4. gulp

    5. Enjoy!

    Installation will add the following files to your root directory (but not override them if they are already there).

    • gulpfile.js - This is the main file that Gulp will use. Add custom tasks here.
    • gulpconfig.js - Set this up config file up. Tell Joe's Gulp Tasks what to do, where to find things, and where to put them.
    • .eslintrc.js - Linting configuration for eslint (Javascript). Default is set to the airBnB styleguide.
    • .stylelintrc.js - Linting configuration for stylelint (Css). Default is set to the airBnB styleguide.



    This will start browserSync, do a single compile, and start your watches. Happy coding!

    More Usage

    This package will auto-generate a number of tasks based on the setup of your ./gulpconfig.js. These tasks are categorized as either 'clean', 'compile', 'validate', 'watch', or 'default'. All currently active tasks within a category can be run using gulp masterTaskName, for example...

    Run all clean tasks

    gulp clean


    Run all compile tasks

    gulp compile

    To list out all current tasks and to view their relations, simply run...

    gulp --tasks


    Here are some of the features this package includes:

    • BrowserSync - This tool is great for development! Serve your site locally, and keep pace with code changes without have to refresh!
    • Sass/Scss Compiling - A collection of tools to glob, compile, add browser compatibility, and compress your stylesheets
    • Javascript Compiling - Babel lets you write the Javascript you want, including ES6. Uglify? Minify? No problem!
    • HTML Templates - Twig.js is a great Javascript implementation of Twig, a powerful but easy to use templating language that brings sanity to your html. Fans of Drupal 8 rejoice!
    • Lint/Validation - Lint your stylesheets, javascript, and html again a wide range of style guides.
    • SassDoc/DocumentationJS - Good code is commented. Reward good code with beautifully rendered documentation. Impress your team, your client, and your boss.


    This package will auto-generate (if they are not already present) two files with default configurations for linting.


    Configuration for linting javascript can be found in the .eslintrc.js file. This package comes with a default .eslintrc.js file configured to use the airBnB's javascript styleguide.


    Configuration for linting css/scss/sass can be found in the .stylelintrc.js file. This package also comes with a default .stylelintrc.js file configured to use the airBnB's css styleguide.

    Sass/Scss and Sass Documentation

    Sass/Scss documentation is handled by Sassdoc. See sassdoc docs at ./sassdoc (at http://localhost:3002/sassdoc after npm start)

    Add more sassdoc annotations like /// @param by seeing docs here.

    Build Sassdocs:

    gulp compile:sassdoc

    JS and JS Documentation

    Javascript documentation is handled by DocumentationJS. See documenationJS docs at ./jsdoc (at http://localhost:3002/jsdoc after npm start)

    Add more jsdoc annotations like /** @param */ by seeing docs here.

    Build JSdocs:

    gulp compile:jsdocs

    Useful Links

    Coming soon...


    1. Delete node_modules and re-install:
    rm -rf node_modules
    npm install
    1. Errors involving 'glob patterns' are usually do to urls in the gulpconfig.js file not pointing to actually directories or files

    2. Running gulp -v should return something like ...

    [21:05:35] CLI version 1.2.2
    [21:05:35] Local version 4.0.0-alpha.2

    If it does not, then you will need to uninstall gulp globally and install the gulp-cli. See gulpjs


    npm i joes-gulp-tasks

    DownloadsWeekly Downloads






    Last publish


    • joekarasek