Step 1:
install gulp-cli
globally on your system. It can be install with the following command,
npm install -g gulp-cli
Step 2:
Go to the theme’s root directory and open the terminal. After that run the following commands.
npm init-y
-y
flag will skip the questions and automatically created a package.json
file.
Now run the following command to install gulp and some dev-dependency tools.
npm install gulp gulp-sass gulp-concat browser-sync --save-dev
Step 3:
Once the dependencies are installed, create a gulpfile.js
inside the theme root. Given below is my gulpfile.js
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var cssbeautify = require('gulp-cssbeautify');
var prefix = require('gulp-autoprefixer');
// sass to css
gulp.task('sass', function () {
return gulp.src('./assets/sass/main.scss',)
.pipe(sass().on('error', sass.logError))
.pipe(prefix('last 2 versions'))
.pipe(cssbeautify())
.pipe(gulp.dest('./assets/css/'))
.pipe(browserSync.reload({stream: true}))
});
// browser-sync task for starting the server.
gulp.task('browser-sync', function() {
//watch files
var files = [
'./assets/sass/**/*.scss',
'./**/*.php'
];
//initialize browsersync
browserSync.init(files, {
//browsersync with a php server
watchTask: true,
proxy: "http://dev.wp/azino/"
});
});
// Start the livereload server and watch files for change
gulp.task( 'watch', function() {
gulp.watch("./assets/sass/**/*.scss", gulp.parallel('sass') );
} );
// Default task to be run with `gulp`
gulp.task( 'default', gulp.parallel('sass', 'browser-sync', 'watch'));
Now run gulp
command line and see the magic.