Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/agence-webup/gulpy
:rocket: A clean and concise Gulp API for common tasks
https://github.com/agence-webup/gulpy
elixir frontend gulp workflow
Last synced: 12 days ago
JSON representation
:rocket: A clean and concise Gulp API for common tasks
- Host: GitHub
- URL: https://github.com/agence-webup/gulpy
- Owner: agence-webup
- License: mit
- Created: 2019-07-29T13:57:16.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-27T04:30:11.000Z (about 2 years ago)
- Last Synced: 2024-04-14T04:55:25.386Z (10 months ago)
- Topics: elixir, frontend, gulp, workflow
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/@agence-webup/gulpy
- Size: 14.5 MB
- Stars: 2
- Watchers: 4
- Forks: 0
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Gulpy
## Install
```shell
npm i -D @agence-webup/gulpy
```
## Example
In your gulpfile.js:
```js
const gulp = require('gulp')
const Gulpy = require('@agence-webup/gulpy')
// config
const gulpy = new Gulpy({
publicFolder: 'dist',
manifest: 'dist/rev-manifest.json',
npmManifest: 'dist/npm-manifest.json'
})
// tasks
const sass = gulpy.sass('src/sass/style.scss', 'dist/css') // this will automatically watch all .scss files in src/sass/**/*
const js = gulpy.js(['src/js/**/*', '!src/js/*.js'], 'dist/js')
const bundle = gulpy.bundle('src/js/*.js', 'dist/js', 'bundle.js')
const images = gulpy.images('src/img/**/*', 'dist/img')
const copyNpm = gulpy.copyNpm('dist/node_modules')
const version = gulpy.version(['dist/**', '!dist/node_modules/**', '!**/*.html'])
const npmVersion = gulpy.npmVersion()
const clean = gulpy.clean(['dist/**'])
const copy = gulp.parallel(
gulpy.copy('src/fonts/**/*', 'dist/fonts'),
gulpy.copy('src/**/*.html', 'dist')
)
const replaceVersion = gulp.parallel(
gulpy.replaceVersion('dist/**/*.css', 'dist'),
gulpy.replaceVersion('dist/**/*.html', 'dist')
)
// export
exports.default = gulp.series(clean, gulp.series(sass, js, bundle, images, copy, copyNpm))
if (gulpy.isProduction()) {
exports.default = gulp.series(exports.default, version, replaceVersion, npmVersion)
}
exports.watch = gulpy.watch()
```
## Methods
* `sass(src, dist)`
* `less(src, dist)`
* `js(src, dist)`
* `bundle(src, dist, filename)`
* `images(src, dist)`
* `clean(dist)`
* `copy(src, dist)`
* `copyNpm(dist)`
* `version(src)`
* `replaceVersion(src, dist)` rewrite occurrences of filenames using the cache manifest in static files
* `npmVersion()` generate a cache manifest for node_modules (useful for cache busting)
* `watch()` auto watch all configured tasks
* `clearCache()` clear the cache (mainly used for images)
* `isProduction()` return true if the flag --production or --prod is used
`src` and `dist`can be glob strings (https://gulpjs.com/docs/en/getting-started/explaining-globs)
## Cache busting
Cache busting is an important process when you want to work with `Expires` header on the server side. Here are some explanations on how Gulpy handle this workflow:
1. `gulpy.version()` appends a hash to filename by using [gulp-rev](https://github.com/sindresorhus/gulp-rev#readme) `image-1.jpg` → `image-1-7e44430a95.jpg`
2. `gulpy.version()` also writes a cache manifest file (from the `manifest` option passed to Gulpy constructor)
3. `gulpy.replaceVersion()` reads the cache manifest file and replaces occurrences of filenames in static files
`body{background-image:url(img/image-1.jpg)}` → `body{background-image:url(img/image-1-7e44430a95.jpg)}`
4. `gulp.npmVersion()` generates a cache manifest for node_modules
## Local development
```
./node_modules/gulp/bin/gulp.js watch
```
You can also use browsersync:
```
./node_modules/gulp/bin/gulp.js watch --proxy http://localhost:8000
```
## Production:
```
./node_modules/gulp/bin/gulp.js --production
```
It will automatically handle production requirement (like files minification) and generate a manifest file for cache busting.