Skip to content

Instantly share code, notes, and snippets.

@shealan
Last active November 11, 2016 01:19
Show Gist options
  • Save shealan/cb9c65766b96bc3a71689d7dfba0b338 to your computer and use it in GitHub Desktop.
Save shealan/cb9c65766b96bc3a71689d7dfba0b338 to your computer and use it in GitHub Desktop.
Gulp workflow with sass compile, js minification and postcss processing.
/* gulp dependencies */
const gulp = require('gulp');
const sass = require('gulp-sass');
const uglify = require('gulp-uglify');
const rename = require('gulp-rename');
const notify = require('gulp-notify');
const minifycss = require('gulp-minify-css');
const concat = require('gulp-concat');
const plumber = require('gulp-plumber');
const browserSync = require('browser-sync');
const postcss = require('gulp-postcss');
const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');
const reload = browserSync.reload;
/* scripts task */
gulp.task('scripts', function() {
return gulp.src([
'node_modules/jquery/dist/jquery.js',
'src/js/main.js'
])
.pipe(concat('main.js'))
.pipe(gulp.dest('assets/js'))
.pipe(rename({suffix: '.min'}))
.pipe(uglify())
.pipe(gulp.dest('assets/js'));
});
/* sass task */
gulp.task('sass', function() {
gulp.src('src/scss/main.scss')
.pipe(plumber())
.pipe(sass({
includePaths: ['scss']
}))
.pipe(gulp.dest('assets/css'));
});
/* postcss/cssnano task */
gulp.task('css', function() {
var processors = [
autoprefixer({browsers: ['last 4 versions']}),
cssnano(),
];
return gulp.src('assets/css/main.css')
.pipe(postcss(processors))
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('assets/css'))
.pipe(reload({stream: true}));
});
/* reload task */
gulp.task('bs-reload', function() {
browserSync.reload();
});
/* browser-sync for localhost */
gulp.task('browser-sync', function() {
browserSync.init(['assets/css/*.css', 'assets/js/*.js'], {
proxy: 'website.dev'
});
});
/* watch scss, js and html files, doing different things with each. */
gulp.task('default', ['sass', 'css', 'browser-sync'], function() {
/* watch scss, run the sass task on change. */
gulp.watch(['src/scss/*.scss', 'src/scss/**/*.scss'], ['sass', 'css']);
/* watch app.js file, run the scripts task on change. */
gulp.watch(['src/js/main.js'], ['scripts']);
/* watch .html files, run the bs-reload task on change. */
gulp.watch(['*.html'], ['bs-reload']);
});
"name": "package-name",
"version": "1.0.0",
"description": "",
"main": "index.html",
"dependencies": {},
"devDependencies": {
"autoprefixer": "^6.5.3",
"browser-sync": "^2.17.5",
"cssnano": "^3.8.0",
"gulp": "^3.9.1",
"gulp-concat": "^2.6.0",
"gulp-minify-css": "^1.2.4",
"gulp-notify": "^2.2.0",
"gulp-plumber": "^1.1.0",
"gulp-postcss": "^6.2.0",
"gulp-rename": "^1.2.2",
"gulp-sass": "^2.3.2",
"gulp-uglify": "^2.0.0",
"gulp-util": "^3.0.7",
"jquery": "2.2.4"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Shealan Forshaw",
"license": "ISC"
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment