Last active
November 11, 2016 01:19
-
-
Save shealan/cb9c65766b96bc3a71689d7dfba0b338 to your computer and use it in GitHub Desktop.
Gulp workflow with sass compile, js minification and postcss processing.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* 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']); | |
}); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
"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