A powerful boilerplate to work with Gulp 3.9 with SASS, PUG and ES6+ with reusable & async tasks.
MIT License
A powerful boilerplate to work with Gulp 3.9 with SASS, PUG and ES6+ with reusable tasks.
This project work on a NodeJS 6+ with JS-ES6+ innovations and the parts of the code are packages, it's just require one to use :)
1 Clone this repo 2 install it
Using | Command line |
---|---|
yarn | yarn |
npm | npm install |
3 Setup your configuration file (gulpfile.config.js
), the ESLint config (.eslintrc.js
), the Babel config (.babelrc
only if you will use Babel, obviously) and be sure that all paths and files are right and ready to be processed
4 Run!
yarn | Command line |
---|---|
dev | yarn dev |
build | yarn build |
npm | Command line |
---|---|
dev | npm run dev |
build | npm run build |
Using Browserify and Babel (ES2015 + stage-0 preset are built-in)
gulp.task('make:js', () => {
return script({
source: config.files.js.src, // your input file coming from the configuration
eslint: true, // using eslint?
concat: `${config.app.name}.js`, // if you prefer concatenate all your JS files into a single one, set a name
transpiler: [
'browserify',
'babel'
], // set the transpiler
rename: '.min', // if you want rename the final file
dest: config.files.js.dest, // your output file coming from the configuration
injection: true // if you want the this file will injected in your index
})
})
With a simple change, setting up UglifyJS
gulp.task('make:js:static', () => {
return script({
source: config.files.static.js.src,
transpiler: 'uglify', // i'm comfortable with my code, just minify
rename: '.min',
dest: config.files.static.js.dest,
injection: true
})
})
You can use all the power of these preprocessors and/or pure CSS!
All files will be combined, autoprefixed, purged, beautified, validated and cleaned by default
The function recognize the file extension and call the preprocessor automatically, if necessary
gulp.task('make:sass', () => {
return style({
source: config.files.sass.src, // your input file coming from the configuration
rename: '.min', // if you want rename the final file
dest: config.files.sass.dest, // your output file coming from the configuration
injection: true // if you want the this file will injected in your index
})
})
With a simple setup, your production environment will be created
const app = {
name: ''
}
const paths = {
src: 'src/',
dist: 'dist/',
static: 'static/'
}
You can call similar tasks passing others parameters without duplicate them and if you need an specific thing, just edit the main function to expand and adjust to your case.
All functions already have an callback to help you work with clear logs about the errors
The functions doesn't have the traditional .pipe
to control the stream, instead of this, I prefer work with pump()
package. If you want know more about it > https://www.npmjs.com/package/pump
.min
extension.index.html
.In your PugJS 'index' you just need add these comments
head
// inject:css
// endinject
body
// libs:js
// endinject
// inject:js
// endinject
The injection task
gulp.task('make:injection', () => {
return injection({
source: {
root: config.files.templates.production[0], // your index file coming from the configuration
libs: [
`${config.paths.dist}static/js/**/*.js`
], // if you need put some libs
app: [
`${config.paths.dist}js/**/*.js`,
`${config.paths.dist}css/**/*.css`,
`${config.paths.dist}static/css/**/*.css`
] // your output files
},
dest: config.paths.dist // the final destination of your index already injected
})
})
You can call this function as many times you want
watch({
source: config.files.templates.debug[0], // your input file(s) coming from the configuration
task: 'make:pug:index' // task that will be run at every change
})
SUGGESTION
myApp
dist
css
myApp.min.css
js
myApp.min.js
static
css
vendor.min.css
fonts
fontawesome.woff2
img
logo.png
js
vendor.min.js
templates
home
home.html
index.html
src
js
myApp.js
sass
myApp.sass
pug
myApp.pug
static
css
vendor.css
fonts
fontawesome.woff2
img
logo.png
js
vendor.js
Clone the repo, change what you want and send PR