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.
Install gulp 4 -
npm install gulpjs/gulp.git#4.0 --save-dev
Install Joe's Gulp Tasks -
npm install joe-gulp-tasks --save-dev
Open the newly created
./gulpconfig.jsfile and set the configurations to match the directory structure of your project. Toggle the settings as you see fit.
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.
- .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!
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
Run all compile tasks
To list out all current tasks and to view their relations, simply run...
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
- 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.
.eslintrc.js file. This package comes with a default
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
Add more sassdoc annotations like
/// @param by seeing docs here.
JS and JS Documentation
Add more jsdoc annotations like
/** @param */ by seeing docs here.
rm -rf node_modules npm install
Errors involving 'glob patterns' are usually do to urls in the
gulpconfig.jsfile not pointing to actually directories or files
gulp -vshould 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