Skip to content

Instantly share code, notes, and snippets.

@maximebj

maximebj/gulpfile.js

Last active Jun 25, 2020
Embed
What would you like to do?
Gulp 4 + Stylus + Browser Sync.
const { src, dest, series, watch } = require('gulp')
const stylus = require('gulp-stylus')
const plumber = require('gulp-plumber')
const browserSync = require('browser-sync')
const sourcemaps = require('gulp-sourcemaps')
const clean = require('gulp-clean')
const server = browserSync.create();
const url = 'site.local'; // Change me
const path = {
stylus: {
src: './stylus/main.styl',
dist: './dist/css',
}
}
function cleanTask() {
src('./dist/', { read: false, allowEmpty: true })
.pipe(clean())
}
function stylusTask() {
return src(path.stylus.src)
.pipe(plumber())
.pipe(sourcemaps.init())
.pipe(stylus({ compress: true }))
.pipe(sourcemaps.write('.'))
.pipe(dest(path.stylus.dist))
.pipe(server.stream())
}
function reloadTask(done) {
server.reload();
done();
}
function startTask(done) {
server.init({
proxy: url,
open: false,
ghostMode: false
});
done();
}
function watchTask() {
watch('stylus/*/*.styl', stylusTask);
watch('includes/*/*.php', reloadTask);
watch('public/js/*.js', reloadTask);
watch('admin/js/*.js', reloadTask);
}
exports.default = series(cleanTask, stylusTask, startTask, watchTask);
{
"devDependencies": {
"browser-sync": "^2.26.7",
"gulp": "^4.0.2",
"gulp-plumber": "^1.2.1",
"gulp-sourcemaps": "^2.6.5",
"gulp-stylus": "^2.7.0",
"gulp-clean": "^0.4.0"
}
}
@maximebj

This comment has been minimized.

Copy link
Owner Author

@maximebj maximebj commented Feb 12, 2020

Install: npm install

Launch: gulp

@maximebj

This comment has been minimized.

Copy link
Owner Author

@maximebj maximebj commented Feb 12, 2020

@maximebj

This comment has been minimized.

Copy link
Owner Author

@maximebj maximebj commented Feb 13, 2020

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.