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']);