Skip to content

Instantly share code, notes, and snippets.

@wturrell
Created February 2, 2019 18:42
Show Gist options
  • Save wturrell/e854ac821c75b8e06721a1284d167f95 to your computer and use it in GitHub Desktop.
Save wturrell/e854ac821c75b8e06721a1284d167f95 to your computer and use it in GitHub Desktop.
Gulp 4.0.0 + SASS, minification, TailwindCSS, PHP and BrowserSync support
"use strict";
// Gulp 4.0.0 + SASS, minification, TailwindCSS, PHP and BrowserSync support
// (assumes you have your .scss + .css files in a /css directory)
// william@wturrell.co.uk
var gulp = require('gulp'),
sass = require('gulp-sass'),
cssnano = require('gulp-cssnano'),
php = require('gulp-connect-php'),
browserSync = require('browser-sync');
var postcss = require('gulp-postcss');
var tailwindcss = require('tailwindcss');
var reload = browserSync.reload;
gulp.task('test', function() {
console.log('Hello World!');
});
gulp.task('css', function(){
return gulp.src('css/*.scss')
// Use gulp-sass to convert SCSS to CSS
.pipe(sass())
.pipe(postcss([
// https://tailwindcss.com/docs/installation/#4-process-your-css-with-tailwind
tailwindcss('./path/to/your/tailwind.js'),
require('autoprefixer')]))
// minimise
.pipe(cssnano())
// write file to disk
.pipe(gulp.dest('css'))
// refresh browser
.pipe(reload({
stream: true
})
);
});
// Troubleshooting - you should see CLI debug messages for both the
// PHP Development server (port 8000) and BrowserSync (ports 3000 + 3001)
// if PHP's base directory is specified wrong, the whole thing can just hang
gulp.task('default', function() {
php.server({
// a standalone PHP server that browsersync connects to via proxy
port: 8000,
keepalive: true
}, function (){
browserSync({
proxy: '127.0.0.1:8000'
});
});
gulp.watch('**/*.html').on('change', function () {
reload();
});
gulp.watch('**/*.php').on('change', function () {
reload();
});
// the CSS task does it's own reloading
gulp.watch("css/*.scss", gulp.series('css'));
});
@sohrabzia
Copy link

could you explain line 27? why do we need to link js for CSS?

@DoIttikorn
Copy link

   gulp.watch('**/*.html').on('change', function () {
        reload();
    });
    gulp.watch('**/*.php').on('change', function () {
        reload();
    });

to

gulp.watch(['**/*.php','**/*.html']).on('change', function () {
        reload();
    });

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment