Jinnmv
7/12/2015 - 6:24 AM

HOWTO.md

{
  "name": "MyProject",
  "version": "1.0.0",
  "private": true,
  "devDependencies": {
    "gulp": "^3.9.0",
    "gulp-autoprefixer": "^3.1.0",
    "gulp-cached": "^1.1.0",
    "gulp-changed": "^1.3.0",
    "gulp-combine-media-queries": "^0.2.0",
    "gulp-connect": "^2.2.0",
    "gulp-csscomb": "^3.0.6",
    "gulp-csso": "^1.0.1",
    "gulp-imagemin": "^2.4.0",
    "gulp-livereload": "^3.8.1",
    "gulp-plumber": "^1.0.1",
    "gulp-rename": "^1.2.2",
    "gulp-replace": "^0.5.4",
    "gulp-sass": "^2.1.0",
    "gulp-shorthand": "^1.1.0",
    "gulp-sourcemaps": "^1.6.0",
    "gulp-watch": "^4.3.5",
    "imagemin-pngquant": "^4.2.0"
  }
}
'use strict';

var gulp = require('gulp'),
    sass = require('gulp-sass'),
    sourcemaps = require('gulp-sourcemaps'),
    prefix = require('gulp-autoprefixer'),
    rename = require('gulp-rename'),
    replace = require('gulp-replace'),
    csso = require('gulp-csso'),
    imagemin = require('gulp-imagemin'),
    pngquant = require('imagemin-pngquant'),
    livereload = require('gulp-livereload'),
    changed = require('gulp-changed'),
    cache = require('gulp-cached'),
    //cmq = require('gulp-combine-media-queries'),
    watch = require('gulp-watch'),
    imagemin = require('gulp-imagemin'),
    shorthand = require('gulp-shorthand'),
    connect = require('gulp-connect');

var path = require('path');

//var SRC = './_src/';
//var DIST = './_dist/';

var dirs = {
    src: './_src/',
    dist: './_dist/',
    cssGlob: './_src/**/css/**/*.css',
    sassGlob: './_src/**/sass/**/*.scss',
    jsGlob: './_src/**/js/**/*.js',
    htmlGlob: './_src/**/*.html',
    fontsGlob: './_src/**/fonts/*',
    imgGlob: ['./_src/**/img/**/*.jpg',
        './_src/**/img/**/*.jpeg',
        './_src/**/img/**/*.png',
        './_src/**/img/**/*.gif'
    ],
};

gulp.task('sass', function() {
    return gulp.src(dirs.sassGlob)
        .pipe(watch(dirs.sassGlob))
        .pipe(cache('sass'), {optimizeMemory: true})
        .pipe(sourcemaps.init())
            .pipe(sass({outputStyle: 'expanded'})
                .on('error', sass.logError))
            .pipe(rename(function(pt) {
                pt.dirname = path.dirname(pt.dirname) + '/css';
            }))
        .pipe(sourcemaps.write())
        .pipe(gulp.dest(dirs.src))
        .pipe(livereload())
        .pipe(connect.reload());
});

gulp.task('css:autoprefix', function() {
    return gulp.src(dirs.cssGlob)
        .pipe(watch(dirs.cssGlob))
        //.pipe(changed(SRC))
        .pipe(cache('css'), {optimizeMemory: true})
        .pipe(sourcemaps.init({loadMaps: true}))
        .pipe(prefix('last 2 version', 'ie 8', 'ie 7'))
        .pipe(sourcemaps.write())
        .pipe(gulp.dest(dirs.src))
        .pipe(livereload())
        .pipe(connect.reload());
});

//gulp.task('css:combine_media_query', function() {
//    return gulp.src(SRC + '**/css/**/*.css')
//        //.pipe(sourcemaps.init({loadMaps: true}))
//        .pipe(cmq({log: true}))
//        //.pipe(sourcemaps.write())
//        .pipe(gulp.dest(SRC))
//        .pipe(livereload());
//});

gulp.task('html:default', function() {
    return gulp.src(dirs.htmlGlob)
        .pipe(watch(dirs.htmlGlob))
        .pipe(cache('html', {optimizeMemory: true}))
        .pipe(livereload())
        .pipe(connect.reload());
});

gulp.task('js:default', function() {
    return gulp.src(dirs.jsGlob)
        .pipe(watch(dirs.jsGlob))
        .pipe(cache('js', {optimizeMemory: true}))
        .pipe(livereload())
        .pipe(connect.reload());
});

gulp.task('img:default', function() {
    return gulp.src(dirs.imgGlob)
        .pipe(watch(dirs.imgGlob))
        .pipe(cache('img', {optimizeMemory: true}))
        .pipe(livereload())
        .pipe(connect.reload());
});

gulp.task('fonts:default', function() {
    return gulp.src(dirs.fontsGlob)
        .pipe(watch(dirs.fontsGlob))
        .pipe(cache('fonts', {optimizeMemory: true}))
        .pipe(livereload())
        .pipe(connect.reload());
});

gulp.task('css', [
    'css:autoprefix',
    //'css:combine_media_query',
]);

gulp.task('html', [
    'html:default',
]);

gulp.task('js', [
    'js:default',
]);

gulp.task('img', [
    'img:default',
]);

gulp.task('fonts', [
    'fonts:default',
]);

gulp.task('watch-folders', [
    'sass',
    'css',
    'html',
    'js',
    'img',
    'fonts',
]);


gulp.task('livreload', function() {
    livereload.listen({basePath: dirs.src});
});

gulp.task('watch-legacy', function(){
	livereload.listen({basePath: dirs.src});
	gulp.watch(dirs.sassGlob, ['sass']);
	gulp.watch(dirs.cssGlob, ['css']);
	gulp.watch(dirs.htmlGlob, ['html']);
});


gulp.task('copy:css', function(){
	gulp.src(dirs.cssGlob)
        .pipe(changed(dirs.dist))
        .pipe(shorthand())
	.pipe(replace(/^(\/\*\#).*$/gm, ''))  // Removes maps links
	.pipe(gulp.dest(dirs.dist))
	.pipe(csso())
	.pipe(rename({ extname: '.min.css' }))
	.pipe(gulp.dest(dirs.dist))
});

gulp.task('copy:img', function(){
	gulp.src(dirs.imgGlob)
        .pipe(changed(dirs.dist))
        .pipe(imagemin({
            progressive: true,
            svgoPlugins: [{removeViewBox: false}],
            use: [pngquant()]
        }))
        .pipe(gulp.dest(dirs.dist))
});

gulp.task('copy:fonts', function(){
	gulp.src(dirs.fontsGlob)
        .pipe(changed(dirs.dist))
        .pipe(gulp.dest(dirs.dist))
});

gulp.task('copy:js', function(){
	gulp.src(dirs.jsGlob)
        .pipe(changed(dirs.dist))
        .pipe(gulp.dest(dirs.dist))
});

gulp.task('copy:html', function(){
	gulp.src(dirs.htmlGlob)
        .pipe(changed(dirs.dist))
        .pipe(gulp.dest(dirs.dist))
});


gulp.task('copy_dist', [
    'copy:html',
    'copy:css',
    'copy:img',
    'copy:fonts',
    'copy:js',
]);


gulp.task('connect', function() {
    connect.server({
        root: dirs.src,
        port: 3000,
        livereload: true
    });
});


gulp.task('default', ['livreload', 'watch-folders']);

gulp.task('build', ['copy_dist']);

gulp.task('server', ['connect', 'watch-folders']);
  1. to be sure that everything is installed:

npm install --save-dev gulp-sass gulp-sourcemaps gulp-autoprefixer gulp-rename gulp-replace gulp-csso gulp-imagemin imagemin-pngquant gulp-livereload gulp-changed gulp-cached gulp-combine-media-queries gulp-watch gulp-connect gulp-shorthand

  1. Now next commands are available:
  • gulp - run gulp in serve mode with autoreload
  • gulp server - starts webserver at localhost:3000 with autoreload
  • gulp build - copy all files from _src to _dist saving hieratchy