local php gulpfile for sass & js

gulpfile.js

/*
	CSLP (c) 2018
	==
	run the whole shabang with `$ gulp watch` in the project directory
	install them all with
	$ npm i -D gulp gulp-sass gulp-connect-php gulp-concat gulp-rename gulp-uglify gulp-if browser-sync
*/

const gulp = require('gulp')
const sass = require('gulp-sass')
//const term = require('gulp-run');
const server = require('gulp-connect-php')
const gulpif = require('gulp-if')
const concat = require('gulp-concat')
const rename = require('gulp-rename')
const uglify = require('gulp-uglify')
const browserSync = require('browser-sync').create()

// environment variables
const project = 'www'     // replace with your localhost folder
const path = '../'        // relative path to be in the required project
const assets = '/common/assets' // img, css, js, pdf ...
const compact = true      // minify javascript
const minicss = true      // minify css
const scss = true         // compile style.css from scss folder in build tools
const js = true           // compile common.js from folder in build tools
const port = '4000'       // mac os only: 'php -S localhost:port -t project'


// compiles scss files to css
gulp.task('sass', () => {
	if (scss) {
		return gulp.src('scss/**/*.scss')
		.pipe(
			sass({ outputStyle: (minicss) ? 'compressed' : 'compact'}).on('error', function (err) {
				console.error(err.message)
				// Display error in the browser
				browserSync.notify(err.message, 3000)
				// Prevent gulp from catching the error and exiting the watch process
				this.emit('end')
			}))
		.pipe(gulp.dest( path + project + assets + '/css/'))
		.pipe(browserSync.reload({ stream: true }))
	}
})

// compiles and concatenates js files and reloads the browser
gulp.task('scripts', () => {
	let scr = (js) ? 'js/**/*.js' : path + project + assets + '/js/**/*.js'

	return gulp.src(scr)
		.pipe(concat('common.js'))
		.pipe(gulp.dest(path + project + assets + '/js/'))
		.pipe(gulpif(compact, rename('common.min.js')))
		.pipe(gulpif(compact, uglify().on('error', function (err) {
			console.error(err.message)
			// Display error in the browser
			browserSync.notify(err.message, 3000)
			// Prevent gulp from catching the error and exiting the watch process
			this.emit('end')
		})))
		.pipe(gulpif(compact, gulp.dest(path + project + assets + '/js/')))
		.pipe(browserSync.reload({ stream: true }))
})

gulp.task('localhost', () => {
	//return term('php -S localhost:' + port + ' -t ' + path + project).exec()
	server.server({hostname: '127.0.0.1', port: port, base: path + project, open: true})
})

// does browser live-reloading
gulp.task('browserSync', ['localhost'], () => {
	browserSync.init({
		proxy: '127.0.0.1:' + port + '/',
		files: [path + project + '**/*.php', path + project + '**/*.css']
	})
	gulp.watch(path + project + '**/*.php', browserSync.reload)
})

// watches files for changes, adjust accordingly
gulp.task('watch', ['sass', 'scripts'], () => {
	gulp.watch('scss/**/*.scss', ['sass'])
	gulp.watch('js/**/*.js', ['scripts'])
	gulp.watch(path + project + assets + '/js/**/*.js', ['scripts'])
})

gulp.task('default', ['browserSync', 'watch'])

// stop old version of gulp watch from running when you modify the gulpfile
gulp.watch("gulpfile.js").on( "change", () => { server.closeServer(); process.exit(0) })