Skip to content

Instantly share code, notes, and snippets.

Last active September 6, 2016 11:51
Show Gist options
  • Save roose/67235adeca09550b82f5edcaec54924e to your computer and use it in GitHub Desktop.
Save roose/67235adeca09550b82f5edcaec54924e to your computer and use it in GitHub Desktop.
var gulp = require('gulp');
var autoprefixer = require('autoprefixer-core');
var vars = require('postcss-simple-vars');
var colorFunction = require("postcss-color-function")
var $ = require('gulp-load-plugins')();
// errors handling and notify
var shitHappens = function(err) {
$.notify.onError("Error: <%= error.message %>")(err);
// concat and minify css files to style.css, style.min.css
gulp.task('css', function() {
var processors = [
autoprefixer({browsers: ['> 1%']}),
return gulp.src('css/main.css')
.pipe($.rename({suffix: '.min'}))
// .pipe($.minifyCss({noAdvanced: true}))
.pipe($.cleanCss({advanced: false}))
// minify js files to default.min.js
gulp.task('js', function() {
return gulp.src('js/default.js')
.pipe($.rename({suffix: '.min'}))
// concat, minify and copy CSS to dist folder
gulp.task('copy:csslibs', ['css'], function() {
return gulp.src(['css/libs/**'], {base: '.'})
gulp.task('copy:css', ['copy:csslibs'], function() {
return gulp.src(['css/style.css', 'css/style.min.css'])
// minify and copy JS to dist folder
gulp.task('copy:js', ['js'], function() {
return gulp.src('js/**/*.js')
// Copy HTML
gulp.task('copy:html', function(){
return gulp.src('*.html')
// Copy and optimize images
gulp.task('copy:images', function() {
return gulp.src('img/*')
.pipe($.imagemin({ optimizationLevel: 3, progressive: true, interlaced: true }))
// Copy fonts
gulp.task('copy:fonts', function() {
return gulp.src('fonts/*')
// Clean, delete dist folder
gulp.task('clean', function (done) {
require('del')(['./dist'], done);
1. delete dist folder
2. copy html files to dist
3. copy css files to dist
4. copy images to dist
5. copy js files to dist
gulp.task('build', ['clean'], function(){
gulp.start(['copy:html', 'copy:css', 'copy:images', 'copy:js', 'copy:fonts']);
// pack dist folder to
gulp.task('zip', function () {
return gulp.src('dist/**/*')
// Watch task
gulp.task('watch', function() {['css/**/*.css', '!css/style.css', '!css/style.min.css'], ['css']);['js/**/*.js', '!js/default.min.js'], ['js']);
// Create LiveReload server
// Watch any html, js, css files, reload on change['*.html', 'js/default.min.js', 'css/style.min.css']).on('change', $.livereload.changed);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment