'use strict';
var gulp = require('gulp'),
watch = require('gulp-watch'),
prefixer = require('gulp-autoprefixer'),
uglify = require('gulp-uglify'),
sass = require('gulp-sass'),
sourcemaps = require('gulp-sourcemaps'),
cssmin = require('gulp-clean-css'),
imagemin = require('gulp-imagemin'),
pngquant = require('imagemin-pngquant'),
rimraf = require('rimraf'),
rename = require('gulp-rename'),
order = require('gulp-order'),
concat = require('gulp-concat'),
browserSync = require('browser-sync'),
plumber = require('gulp-plumber'),
include = require('gulp-include'),
gcmq = require('gulp-group-css-media-queries'),
svgstore = require('gulp-svgstore'),
inlinesource = require('gulp-inline-source'),
svgmin = require('gulp-svgmin'),
pathFnc = require('path'),
rev = require('gulp-rev-append'),
babel = require('gulp-babel'),
reload = browserSync.reload;
var typeProject = 1; // 1 - only create folder 'build', create folders 'build' and 'public' (public - default name)
var prodactionFolder = 'public';
var path = {
build: {
html: 'build/',
js: ['build/js/', '../'+prodactionFolder+'/js/'],
json: ['build/json/', '../'+prodactionFolder+'/json/'],
css: ['build/css/', '../'+prodactionFolder+'/css/'],
media: ['build/img/', '../'+prodactionFolder+'/media/'],
fonts: ['build/fonts/', '../'+prodactionFolder+'/fonts/'],
inlineStyle: 'src/html/templates/parts/',
},
src: {
html: 'src/html/*.html',
jsManual: 'src/js/parts/[^_]*.js',
jsLibs: 'src/js/libs/*.js',
json: 'src/json/**/*.json',
style: 'src/style/**/*.scss',
inlineStyle: 'src/inline/**/*.scss',
media: 'src/media/**/*.*',
svgIcons: 'src/media/sprite/**/*.*',
fonts: 'src/fonts/**/*.*'
},
watch: {
html: 'src/**/*.html',
js: 'src/js/**/*.js',
json: 'src/json/**/*.json',
style: 'src/style/**/*.scss',
inlineStyle: 'src/inline/**/*.scss',
media: 'src/media/**/*.*',
svgIcons: 'src/media/sprite/**/*.*',
fonts: 'src/fonts/**/*.*'
},
clean: './build'
};
var config = {
server: {
baseDir: './build'
},
// tunnel: true,
tunnel: false,
host: 'localhost',
port: 9000,
logPrefix: 'NameProject'
};
gulp.task('webserver', function () {
browserSync(config);
});
gulp.task('clean', function (cb) {
rimraf(path.clean, cb);
});
gulp.task('html:build', function () {
gulp.src(path.src.html)
.pipe(include())
.pipe(rev())
.pipe(gulp.dest(path.build.html))
.pipe(reload({stream: true}));
});
gulp.task('js:build', function () {
for (var i = 0; i < typeProject; i++) {
gulp.src(path.src.jsManual)
.pipe(plumber())
.pipe(include())
.pipe(concat('scripts.js'))
.pipe(gulp.dest(path.build.js[i]))
.pipe(uglify())
.pipe(rename('scripts.min.js'))
.pipe(gulp.dest(path.build.js[i]))
.pipe(reload({stream: true}))
gulp.src(path.src.jsLibs)
.pipe(plumber())
.pipe(concat('libs.js'))
.pipe(gulp.dest(path.build.js[i]))
.pipe(uglify())
.pipe(rename('libs.min.js'))
.pipe(gulp.dest(path.build.js[i]));
}
});
gulp.task('json:build', function() {
for (var i = 0; i < typeProject; i++) {
gulp.src(path.src.json)
.pipe(gulp.dest(path.build.json[i]))
.pipe(reload({stream: true}))
}
});
gulp.task('style:build', function () {
for (var i = 0; i < typeProject; i++) {
gulp.src([path.src.style, '!'+path.src.style+'/inline/**/*.scss'])
.pipe(plumber())
.pipe(order([
'base/_setting.scss',
'base/_mixin.scss',
'base/normalize.scss',
'vendors/**/*.scss',
'ui/**/*.scss',
'layout/**/*.scss',
'page/**/*.scss'
]))
.pipe(sourcemaps.init())
.pipe(concat('style.scss'))
.pipe(sass({
includePaths: ['src/style/style.scss'],
outputStyle: 'expanded',
sourceMap: false,
errLogToConsole: true
}))
.pipe(prefixer({browsers: ['last 16 versions']}))
.pipe(gcmq())
.pipe(gulp.dest(path.build.css[i]))
.pipe(reload({stream: true}))
.pipe(cssmin())
.pipe(rename('style.min.css'))
.pipe(gulp.dest(path.build.css[i]));
}
});
gulp.task('inline-css:build', function () {
gulp.src(path.src.inlineStyle)
.pipe(plumber())
.pipe(concat('inline.scss'))
.pipe(sass({
includePaths: ['style/inline.scss'],
outputStyle: 'compact',
sourceMap: false,
errLogToConsole: true
}))
.pipe(prefixer({browsers: ['last 16 versions']}))
.pipe(gcmq())
.pipe(cssmin())
.pipe(rename('inline.html'))
.pipe(gulp.dest(path.build.inlineStyle))
.pipe(reload({stream: true}));
});
gulp.task('svg:build', function () {
for (var i = 0; i < typeProject; i++) {
return gulp.src(path.src.svgIcons)
.pipe(svgmin(function (file) {
var prefix = pathFnc.basename(file.relative, pathFnc.extname(file.relative));
return {
plugins: [{
cleanupIDs: {
prefix: prefix + '-',
minify: true
}
}]
}
}))
.pipe(rename({prefix: 'icon-'}))
.pipe(svgstore())
// .pipe(rename('sprite.html'))
.pipe(gulp.dest(path.build.media[i]))
.pipe(reload({stream: true}));
}
});
gulp.task('image:build', function () {
for (var i = 0; i < typeProject; i++) {
gulp.src(path.src.media)
// .pipe(imagemin({
// progressive: true,
// svgoPlugins: [{removeViewBox: false}],
// use: [pngquant()],
// interlaced: true
// }))
.pipe(gulp.dest(path.build.media[i]))
.pipe(reload({stream: true}));
}
});
gulp.task('fonts:build', function() {
for (var i = 0; i < typeProject; i++) {
gulp.src(path.src.fonts)
.pipe(gulp.dest(path.build.fonts[i]))
.pipe(reload({stream: true}))
}
});
gulp.task('build', [
'image:build',
'svg:build',
'js:build',
'json:build',
'style:build',
'inline-css:build',
'fonts:build',
'html:build',
]);
gulp.task('watch', function(){
watch([path.watch.media], function(event, cb) {
gulp.start('image:build');
});
watch([path.watch.style], function(event, cb) {
setTimeout(function () {
gulp.start('style:build');
}, 1000);
});
watch([path.watch.inlineStyle], function(event, cb) {
setTimeout(function () {
gulp.start('inline-css:build');
}, 1000);
});
watch([path.watch.js], function(event, cb) {
setTimeout(function () {
gulp.start('js:build');
}, 1000);
});
watch([path.watch.svgIcons], function(event, cb) {
setTimeout(function () {
gulp.start('svg:build');
}, 1000);
});
watch([path.watch.json], function(event, cb) {
setTimeout(function () {
gulp.start('json:build');
}, 1000);
});
watch([path.watch.html], function(event, cb) {
gulp.start('html:build');
});
watch([path.watch.fonts], function(event, cb) {
setTimeout(function () {
gulp.start('fonts:build');
}, 1000);
});
});
gulp.task('default', ['build', 'webserver', 'watch']);
gulp.task('prod', ['clean', 'build', 'watch']);