Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/essomia/gulpflow-starter
Boilerplate to start a Gulp 4 front-end project with scss, babel, linter and images optimisation.
https://github.com/essomia/gulpflow-starter
babel boilerplate compiler front-end gulp linter sass scss starter workflow
Last synced: 22 days ago
JSON representation
Boilerplate to start a Gulp 4 front-end project with scss, babel, linter and images optimisation.
- Host: GitHub
- URL: https://github.com/essomia/gulpflow-starter
- Owner: Essomia
- License: mit
- Created: 2018-07-25T00:45:03.000Z (over 6 years ago)
- Default Branch: main
- Last Pushed: 2024-06-12T14:22:34.000Z (7 months ago)
- Last Synced: 2024-06-12T20:18:22.599Z (7 months ago)
- Topics: babel, boilerplate, compiler, front-end, gulp, linter, sass, scss, starter, workflow
- Language: SCSS
- Homepage:
- Size: 2.15 MB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# 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.
```js
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:
```js
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
/
/assets
/fonts
/images
/raw
/js
/scss
```
And that will be compiled to destinations:
```
/example/app
/css/
/fonts/
/images/
/json/
/scripts/
/styles/
/templates/
```