Skip to content

Instantly share code, notes, and snippets.

@ivandoric ivandoric/gulpfile.js
Last active Jul 14, 2019

Embed
What would you like to do?
Adding Svelte To Your Website Using Gulp and Webpack
// This is the code used in video "How To Add Svelte To Your Site?"
// Check out the video here: https://www.youtube.com/watch?v=ZL7mKFQHSAY
const gulp = require('gulp')
const sass = require('gulp-sass')
const browsersync = require('browser-sync').create()
const webpack = require('webpack')
const webpackStream = require('webpack-stream')
function pack() {
const mode = process.env.NODE_ENV || 'development';
return gulp.src('svelte.js')
.pipe(webpackStream({
output: {
filename: 'svelte.js'
},
module: {
rules: [
{
test: /\.svelte$/,
exclude: /node_modules/,
use: 'svelte-loader'
}
]
},
mode
}, webpack))
.pipe(gulp.dest('./js/'))
}
function scss () {
return gulp.src('./scss/**/*.scss')
.pipe(sass({
outputStyle: 'expanded'
}).on('error', sass.logError))
.pipe(gulp.dest('./css'))
.pipe(browsersync.stream({match: '**/*.css'}))
}
function browserSync(done) {
browsersync.init({
server: {
baseDir: './'
},
notify: false,
port: 3000
});
done();
}
function watchFiles() {
gulp.watch('./scss/**/*.scss', scss)
gulp.watch(['./svelte.js', './*.svelte']).on('change', gulp.series(pack, browsersync.reload))
gulp.watch(['./**/*.html']).on('change', browsersync.reload)
}
// Define tasks
const watch = gulp.parallel(watchFiles, browserSync)
// Export tasks
exports.watch = watch
exports.scss = scss
exports.pack = pack
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.