Skip to content

Instantly share code, notes, and snippets.

@Canvilled
Created May 20, 2021 17:39
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save Canvilled/54b35d9c62fecbfb4aee327b1bf2a1ba to your computer and use it in GitHub Desktop.
import { src, dest, watch, series, parallel } from 'gulp'
import yargs from 'yargs'
import sass from 'gulp-sass'
import cleanCss from 'gulp-clean-css'
import gulpif from 'gulp-if'
import postcss from 'gulp-postcss'
import sourcemaps from 'gulp-sourcemaps'
import autoprefixer from 'autoprefixer'
import imagemin from 'gulp-imagemin'
import del from 'del'
import webpack from 'webpack-stream'
import browserSync from 'browser-sync'
import info from './package.json'
import wpPot from 'gulp-wp-pot'
import VueLoaderPlugin from 'vue-loader/lib/plugin'
const PRODUCTION = yargs.argv.prod
const server = browserSync.create()
export const serve = (done) => {
server.init({
proxy: 'http://wolfactive.local', // put your local website link here
})
done()
}
export const styles = () => {
return src('src/scss/main.scss')
.pipe(gulpif(!PRODUCTION, sourcemaps.init()))
.pipe(sass().on('error', sass.logError))
.pipe(gulpif(PRODUCTION, postcss([autoprefixer])))
.pipe(gulpif(PRODUCTION, cleanCss({ compatibility: 'ie8' })))
.pipe(gulpif(!PRODUCTION, sourcemaps.write()))
.pipe(dest('dist/css'))
.pipe(server.stream())
}
export const images = () => {
return src('src/images/**/*.{jpg,jpeg,png,svg,gif}')
.pipe(gulpif(PRODUCTION, imagemin()))
.pipe(dest('dist/images'))
}
export const scripts = () => {
return src('src/js/root.js')
.pipe(
webpack({
module: {
rules: [
{
test: /\.js$/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
},
},
},
{
test: /\.vue$/,
loader: 'vue-loader',
},
],
},
plugins: [new VueLoaderPlugin()],
resolve: {
alias: {
vue$: 'vue/dist/vue.runtime.esm.js',
},
extensions: ['*', '.js', '.vue', '.json'],
},
mode: PRODUCTION ? 'production' : 'development',
devtool: !PRODUCTION ? 'inline-source-map' : false,
output: {
filename: 'root.js',
},
})
)
.pipe(dest('dist/js'))
}
export const copy = () => {
return src([
'src/**/*',
'!src/{images,js,scss}',
'!src/{images,js,scss}/**/*',
]).pipe(dest('dist'))
}
export const reload = (done) => {
server.reload()
done()
}
export const watchForChanges = () => {
watch('src/scss/**/*.scss', styles)
watch('src/images/**/*.{jpg,jpeg,png,svg,gif}', series(images, reload))
watch(
['src/**/*', '!src/{images,js,scss}', '!src/{images,js,scss}/**/*'],
series(copy, reload)
)
watch(['src/js/**/*.js', 'src/js/**/*.vue'], series(scripts, reload))
watch('**/*.php', reload)
}
export const pot = () => {
return src('**/*.php')
.pipe(
wpPot({
domain: '_themename',
package: info.name,
})
)
.pipe(dest(`languages/${info.name}.pot`))
}
export const clean = () => del(['dist/js', 'dist/css/main.scss', 'dist/images'])
export const dev = series(
clean,
parallel(styles, images, copy, scripts),
serve,
watchForChanges
)
export const build = series(clean, parallel(styles, images, copy, scripts), pot)
export default dev
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment