Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
CodyFrame gulp config file for a PHP project
var gulp = require('gulp');
var sass = require('gulp-sass');
var sassGlob = require('gulp-sass-glob');
var browserSync = require('browser-sync');
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');
var cssvariables = require('postcss-css-variables');
var calc = require('postcss-calc');
var concat = require('gulp-concat');
var rename = require('gulp-rename');
var uglify = require('gulp-uglify');
var connect = require('gulp-connect-php');
var projectPath = 'localhost:8888/projectName'; // 👈make sure to replace 'projectName' with the name of your project folder
// js file paths
var utilJsPath = 'main/assets/js';
var componentsJsPath = 'assets/js/components/*.js'; // component js files
var scriptsJsPath = 'assets/js'; //folder for final scripts.js/scripts.min.js files
// css file paths
var cssFolder = 'assets/css'; // folder for final style.css/style-fallback.css files
var scssFilesPath = 'assets/css/**/*.scss'; // scss files to watch
function reload(done) {
browserSync.reload({notify: false});
done();
}
gulp.task('sass', function() {
return gulp.src(scssFilesPath)
.pipe(sassGlob())
.pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
.pipe(postcss([autoprefixer()]))
.pipe(gulp.dest(cssFolder))
.pipe(browserSync.reload({
stream: true,
notify: false
}))
.pipe(rename('style-fallback.css'))
.pipe(postcss([cssvariables(), calc()]))
.pipe(gulp.dest(cssFolder));
});
gulp.task('scripts', function() {
return gulp.src([utilJsPath+'/util.js', componentsJsPath])
.pipe(concat('scripts.js'))
.pipe(gulp.dest(scriptsJsPath))
.pipe(rename('scripts.min.js'))
.pipe(uglify())
.pipe(gulp.dest(scriptsJsPath))
.pipe(browserSync.reload({
stream: true,
notify: false
}));
});
gulp.task('watch', gulp.series(['sass', 'scripts'], function () {
connect.server({}, function (){
browserSync({
proxy: projectPath, // 👈 this contains the name of your project folder
notify: false
});
});
gulp.watch('**/*.php', gulp.series(reload));
gulp.watch('assets/css/**/*.scss', gulp.series(['sass']));
gulp.watch(componentsJsPath, gulp.series(['scripts']));
}));
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.