Last active
June 25, 2020 17:49
-
-
Save maximebj/09c3af282496b4daade6ec7efba2390a to your computer and use it in GitHub Desktop.
Gulp 4 + Stylus + Browser Sync.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"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" | |
} | |
} |
More complete example:
https://gist.github.com/asissuthar/d3fbd3dbbd4182927e7a0c30c64d6cbd
Another one from posykrat:
https://github.com/posykrat/dfwp/blob/master/build/gulpfile.js
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Install:
npm install
Launch:
gulp