Last active
April 27, 2017 15:08
-
-
Save theWhiteFox/4aca8ec20fd203225347980df3627e60 to your computer and use it in GitHub Desktop.
gulp file with browser-sync, minify css, js, and image-optimization to dist folders
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
| "use strict"; | |
| var gulp = require('gulp'); | |
| var browserSync = require('browser-sync').create(); | |
| var header = require('gulp-header'); | |
| var cleanCSS = require('gulp-clean-css'); | |
| var rename = require("gulp-rename"); | |
| var uglify = require('gulp-uglify'); | |
| var pkg = require('./package.json'); | |
| var imageop = require('gulp-image-optimization'); | |
| var uncss = require('gulp-uncss'); | |
| // var browserify = require('gulp-browserify'); | |
| // Set the banner content | |
| var banner = ['/*!\n', | |
| ' * Start Bootstrap - <%= pkg.title %> v<%= pkg.version %> (<%= pkg.homepage %>)\n', | |
| ' * Copyright 2013-' + (new Date()).getFullYear(), ' <%= pkg.author %>\n', | |
| ' */\n', | |
| '' | |
| ].join(''); | |
| // concatenate & minify CSS | |
| gulp.task('minify-css', function () { | |
| return gulp.src('src/css/*.css') | |
| .pipe(cleanCSS({compatibility: 'ie8'})) | |
| .pipe(rename({suffix: '.min'})) | |
| .pipe(gulp.dest('dist/css')) | |
| .pipe(browserSync.reload({ | |
| stream: true | |
| })) | |
| }); | |
| // concatenate & minify JS | |
| gulp.task('minify-js', function () { | |
| return gulp.src('src/js/*js') | |
| .pipe(uglify()) | |
| .pipe(header(banner, {pkg: pkg})) | |
| .pipe(rename({suffix: '.min'})) | |
| .pipe(gulp.dest('dist/js')) | |
| .pipe(browserSync.reload({ | |
| stream: true | |
| })) | |
| }); | |
| gulp.task('image-optimization', function (cb) { | |
| gulp.src(['src/img/**/*.png', 'src/img/**/*.jpg', 'src/img/**/*.gif', 'src/img/**/*.jpeg']).pipe(imageop({ | |
| optimizationLevel: 5, | |
| progressive: true, | |
| interlaced: true | |
| })).pipe(gulp.dest('dist/img')).on('end', cb).on('error', cb); | |
| }); | |
| // Run everything | |
| gulp.task('default', ['minify-css', 'minify-js', 'image-optimization']); | |
| // Configure the browserSync task | |
| gulp.task('browserSync', function () { | |
| browserSync.init({ | |
| server: { | |
| baseDir: '' | |
| }, | |
| }) | |
| }) | |
| // Dev task with browserSync | |
| gulp.task('dev', ['browserSync', 'minify-css', 'minify-js'], function () { | |
| gulp.watch('src/css/*.css', ['minify-css']); | |
| gulp.watch('src/js/*.js', ['minify-js']); | |
| // Reloads the browser whenever HTML or JS files change | |
| gulp.watch('pages/*.html', browserSync.reload); | |
| gulp.watch('dist/js/*.js', browserSync.reload); | |
| }); | |
| // npm init | |
| // npm install | |
| // npm install browser-sync gulp --save-dev | |
| // https://browsersync.io/docs/gulp |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment