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