{
"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']);
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
gulp
- run gulp in serve mode with autoreloadgulp server
- starts webserver at localhost:3000 with autoreloadgulp build
- copy all files from _src
to _dist
saving hieratchy