mkoller

// Gulp images
gulp.task('images', function(){
  return gulp.src('img/**/*.+(png|jpg|gif|svg)')
  // Caching images that ran through imagemin
	  .pipe(cache(imagemin({
	      interlaced: true
	    })))
	.pipe(gulp.dest('img'))
});

mkoller

gulp.task('compress', function (cb) {
  pump([
        gulp.src('js/*.js'),
        uglify(), // minifies js in same location
        gulp.dest('js')
    ],
    cb
  );
});

mkoller

// Convert sass to css
gulp.task('sass', function(){
  return gulp.src('sass/**/*.scss') // this globs all .scss files found in folder/subfolders
    // Initializes sourcemaps
    .pipe(sourcemaps.init()) // this produces a sourcemaps at the bottom of our .css file for browser debugging
    .pipe(cssnano()) // Added in css Nano
    .pipe(sass({
      errLogToConsole: true // this will log sass console errors in the terminal
     }))
    // Writes sourcemaps into the CSS file

mkoller

{
  "name": "app-name",
  "version": "1.0.0",
  "description": "npm packages", 
  "main": "gulpfile.js",
  "dependencies": {
    "gulp": "^3.9.1"
  },
    "devDependencies": {
    "browser-sync": "^2.13.0",

mkoller

// Gulp watch syntax
gulp.task('watch', ['browserSync' , 'sass'], function(){
  gulp.watch('scss/**/*.scss', ['sass']); // globs .scss files for watching
  // Reloads the browser whenever HTML or JS files change
  gulp.watch('*.html', browserSync.reload); // watches all .html files found in the root dir
  gulp.watch('js/**/*.js', browserSync.reload); // globs .js files for watching
  console.log('To stop watching type control c'); // this will log a console message that instructs how to stop th gulp task
})

mkoller

// Browsersync Task
gulp.task('browserSync', function() {
  browserSync.init({
    server: {
      baseDir: ''  // were are using the root dir to server browserync
    },
  })
})

mkoller

// Convert sass to css
gulp.task('sass', function(){
  return gulp.src('sass/**/*.scss') // this globs all .scss files found in folder/subfolders
    // Initializes sourcemaps
    .pipe(sourcemaps.init()) // this produces a sourcemaps at the bottom of our .css file for browser debugging
    .pipe(sass({
      errLogToConsole: true // this will log sass console errors in the terminal
     }))
    // Writes sourcemaps into the CSS file
    .pipe(sourcemaps.write())

mkoller

// Convert sass to css
gulp.task('sass', function(){
  return gulp.src('sass/**/*.scss') // this globs all .scss files found in folder/subfolders
    // Initializes sourcemaps
    .pipe(sourcemaps.init()) // this produces a sourcemaps at the bottom of our .css file for browser debugging
    .pipe(sass({
      errLogToConsole: true // this will log sass console errors in the termninal
     }))
    // Writes sourcemaps into the CSS file
    .pipe(sourcemaps.write())

mkoller

// Convert sass to css
gulp.task('sass', function(){
  return gulp.src('scss/**/*.scss')
    // Initializes sourcemaps
    .pipe(sourcemaps.init())
    .pipe(sass({
      errLogToConsole: true
     }))
    // Writes sourcemaps into the CSS file
    .pipe(sourcemaps.write())

mkoller

// gulp
var gulp = require('gulp');
// Requires the gulp-sass plugin
var sass = require('gulp-sass');
// minify css
var cssnano = require('gulp-cssnano');
// implement sourcemaps
var sourcemaps = require('gulp-sourcemaps');
// Gulp live reloading
var browserSync = require('browser-sync').create();