Skip to content

Instantly share code, notes, and snippets.

@wickywills
Created December 11, 2019 14:23
Show Gist options
  • Save wickywills/7349833e9c3431b2143f52d8d91dea35 to your computer and use it in GitHub Desktop.
Save wickywills/7349833e9c3431b2143f52d8d91dea35 to your computer and use it in GitHub Desktop.
```
// Initialize modules
// Importing specific gulp API functions lets us write them below as series() instead of gulp.series()
const { src, dest, watch, series, parallel } = require('gulp');
// Importing all the Gulp-related packages we want to use
const sourcemaps = require('gulp-sourcemaps');
const sass = require('gulp-sass');
const concat = require('gulp-concat');
const uglify = require('gulp-uglify');
const babel = require('gulp-babel');
const plumber = require('gulp-plumber');
var replace = require('gulp-replace');
// File paths
const files = {
scssPath: 'resources/assets/styles/**/*.scss',
jsPath: 'resources/assets/scripts/**/*.js'
};
// Sass task: compiles the style.scss file into style.css
function scssTask(){
return src(files.scssPath)
.pipe(sourcemaps.init()) // initialize sourcemaps first
.pipe(sass()) // compile SCSS to CSS
.pipe(sourcemaps.write('.')) // write sourcemaps file in current directory
.pipe(dest('dist/styles')); // put final CSS in dist folder
}
// JS task: concatenates and uglifies JS files to script.js
function jsTask(){
return src('resources/assets/scripts/**/*.js')
// Stop the process if an error is thrown.
.pipe(plumber())
// Transpile the JS code using Babel's preset-env.
.pipe(babel({
presets: [
['@babel/env', {
modules: false
}]
]
}))
.pipe(concat('main.js'))
.pipe(uglify())
// Save each component as a separate file in dist.
.pipe(dest('./dist'))
}
// Watch task: watch SCSS and JS files for changes
// If any change, run scss and js tasks simultaneously
function watchTask(){
watch([files.scssPath, files.jsPath],
series(
parallel(scssTask, jsTask),
)
);
}
// Export the default Gulp task so it can be run
// Runs the scss and js tasks simultaneously
exports.default = series(
parallel(scssTask, jsTask),
watchTask
);
```
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment