Last active
March 29, 2023 17:17
-
-
Save itzikbenh/f8c5bca0aa94ce515c917053249aa6fc to your computer and use it in GitHub Desktop.
Gulp configuration for my WordPress theme development
This file contains hidden or 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
| /* | |
| Create package.json and install all packages: | |
| 1. npm init | |
| 2. npm install -g gulp | |
| 3. npm install gulp gulp-babel babel-preset-es2015 gulp-concat gulp-csso gulp-rename gulp-sass gulp-uglify gulp-watch browser-sync --save-dev | |
| Expected file structure: | |
| ./css/src/*.scss | |
| In this folder you can have as much SASS files as you want, but you will need to have a "theme.scss" file that will import | |
| all other SASS files, because GULP would look for that file in order to convert it to CSS syntax. | |
| ./js/src/*.js -> You can have as much JS files as you want. | |
| commands: | |
| "gulp" - will watch all your theme files and reload/inject on change. | |
| "gulp production" - will minify CSS and JS files. | |
| NOTE - I'm using localhost:8888 for proxy in browser-sync config. Change it accordingly. | |
| */ | |
| var gulp = require('gulp'); | |
| var concat = require('gulp-concat'); | |
| var sass = require('gulp-sass'); | |
| var watch = require('gulp-watch'); | |
| var babel = require('gulp-babel'); | |
| var browserSync = require('browser-sync'); | |
| var csso = require('gulp-csso'); | |
| var uglify = require('gulp-uglify'); | |
| var rename = require('gulp-rename'); | |
| gulp.task('scripts', function() { | |
| gulp.src('./js/src/*.js') | |
| .pipe(concat('theme.js')) | |
| .pipe(babel({ presets: ['es2015'] })) | |
| .pipe(gulp.dest('./js/')); | |
| }); | |
| gulp.task('sass', function() { | |
| gulp.src('./css/src/theme.scss') | |
| .pipe(sass()) | |
| .pipe(gulp.dest('./css')); | |
| }); | |
| //run "gulp production" so you can serve minifed files when you deploy to production | |
| gulp.task('production', function() { | |
| gulp.src('./js/theme.js') | |
| .pipe(uglify()) | |
| .pipe(rename({ | |
| suffix: '.min' | |
| })) | |
| .pipe(gulp.dest('./js')); | |
| gulp.src('./css/theme.css') | |
| .pipe(csso()) | |
| .pipe(rename({ | |
| suffix: '.min' | |
| })) | |
| .pipe(gulp.dest('./css')); | |
| }); | |
| gulp.task('watch',['scripts', 'sass'], function () { | |
| gulp.watch('./js/src/*.js' , ['scripts']); | |
| gulp.watch('./css/src/*.scss' , ['sass']); | |
| }); | |
| gulp.task('sync', function() { | |
| var options = { | |
| proxy: 'localhost:8888', | |
| port: 3000, | |
| files: [ | |
| '**/*.*' | |
| ], | |
| ghostMode: { | |
| clicks: true, | |
| location: false, | |
| forms: true, | |
| scroll: true | |
| }, | |
| injectChanges: true, | |
| logFileChanges: true, | |
| logLevel: 'debug', | |
| logPrefix: 'gulp-patterns', | |
| notify: true, | |
| reloadDelay: 0 | |
| }; | |
| browserSync(options); | |
| }); | |
| //When you run "gulp" it will run all the tasks that you specify in the array. Notice that the "production" task | |
| //is not specified, because it should be used at deployment time when everything is done. | |
| gulp.task('default', ['scripts', 'sass', 'watch', 'sync']); | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Have you checked out WPGulp? It is being used in 100+ projects. I built it last year; have been actively maintaining and improving it.
https://github.com/ahmadawais/WPGulp/