denisskachko
4/14/2017 - 5:52 AM

gulp themes, reload, autoprefixer

gulp themes, reload, autoprefixer

{
  "name": "widget",
  "version": "2.5.0",
  "description": "responsive design",
  "main": "gulpfile.js",
  "dependencies": {
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^3.1.1",
    "gulp-clean-css": "^3.0.4",
    "gulp-connect": "^5.0.0",
    "gulp-group-css-media-queries": "^1.2.0",
    "gulp-livereload": "^3.8.1",
    "gulp-notify": "^3.0.0",
    "gulp-sass": "^3.1.0",
    "gulp-wait": "^0.0.2",
    "gulp-compile-handlebars": "^0.6.1"
  },
  "devDependencies": {
    "gulp-compile-handlebars": "^0.6.1"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Denis Skachko",
  "license": "ISC"
}
'use strict'
var gulp = require('gulp');
var scss = require('gulp-sass');
var notify = require('gulp-notify');
var connect = require('gulp-connect');
var livereload = require('gulp-livereload');
var wait = require('gulp-wait');
var group = require('gulp-group-css-media-queries');
var cleanCSS = require('gulp-clean-css');
var autoprefixer = require('gulp-autoprefixer');
var handlebars = require('gulp-compile-handlebars');

var themes = ['default', 'eva'] ;

var path = {
    scss: './scss/**/*.scss',
    components: './components/MDL/*.scss',
    css: './css/',
    html: './views/*.html'
};

var apOptions = {
    browsers: [
        'last 2 versions',
        'not ie <= 9',
        'not ie_mob <= 9',
        'Firefox >= 20',
        'last 4 Android versions',
        'Safari >= 8'
    ]
};

var templateData = {
            themeName: 'adobe'
        };

gulp.task('connect', function() {
    connect.server({
        port: 8333,
        livereload: true
    })
})

//nested, expanded, compact, compressed
var OUTPUTFORMAT = {
    outputStyle: 'expanded'
};

gulp.task('scss', function() {
    themes.forEach(function(theme){
        var templateData = {
            themeName: theme
        }
        gulp.src(path.scss)
            .pipe(wait(200))
            .pipe(handlebars(templateData))
            .pipe(scss.sync(OUTPUTFORMAT).on('error', scss.logError))
            .pipe(notify('SASS ' + theme + ' <%= file.relative %> Done!'))
            .pipe(group())
            .pipe(autoprefixer(apOptions))
            .pipe(cleanCSS())
            .pipe(gulp.dest(path.css + theme))
            .pipe(connect.reload());
    })
});

gulp.task('html', function() {
    gulp.src(path.html)
        .pipe(connect.reload());
})

gulp.task('components', function() {
    gulp.src(path.components)
        .pipe(scss.sync(OUTPUTFORMAT).on('error', scss.logError))
        .pipe(notify('SASS ' + '<%= file.relative %> Done!'))
        .pipe(gulp.dest(path.css));
});

gulp.task('watch', function() {
    //livereload.listen();
    gulp.watch(path.scss, ['scss'])
});

gulp.task('watch:html', function() {
    //livereload.listen();
    gulp.watch(path.html, ['html'])
});

gulp.task('watch:all', function() {
    //livereload.listen();
    gulp.watch(path.html, ['html']);
    gulp.watch(path.scss, ['scss']);
});

gulp.task('default', ['connect', 'scss', 'watch']);

gulp.task('htm', ['connect', 'html', 'watch:html']);
gulp.task('all', ['connect', 'html', 'watch:all']);