// ~ Compile JS ~
var jsFilter = gulpFilter('**/*.js');
// Concat vendor JS (uglify for production)
gulp.task('js:vendor', function() {
gulp.src(mainBowerFiles({
"overrides": {
"jquery": {
"main": "./dist/jquery.min.js"
},
"magnific-popup": {
"main": "./dist/jquery.magnific-popup.min.js"
},
"slick-carousel": {
"main": "./slick/slick.min.js"
},
"readmore-js": {
"main": "./readmore.js"
}
}
}))
.pipe(jsFilter)
.pipe(concat('vendor.js'))
.pipe(gulpIf(env !== 'dev', uglify()))
.pipe(size())
.pipe(gulp.dest(outputDir + 'js'))
});
// Concat own JS (uglify for production)
gulp.task('js', function() {
gulp.src(src.js)
.pipe(jsHint())
.pipe(jsHint.reporter('default'))
.pipe(concat('script.js'))
.pipe(gulpIf(env !== 'dev', uglify()))
.pipe(gulp.dest(outputDir + 'js'))
.pipe(size())
.pipe(connect.reload());
});
var src = {
svgsprite: ['./src/img/icons/sprites/*.svg']
},
gulp.task('svgsprite', function() {
return gulp.src(src.svgsprite)
.pipe(svgSprite(config = {
preview: false,
selector: "icon-%f",
cssFile: "_svgsprite.scss",
svg: {
sprite: "img/sprite.svg"
},
dimension : {
maxWidth : 32,
maxHeight : 32
},
baseSize: 32
}))
.pipe(gulp.dest('./src/sass'))
.pipe(connect.reload())
});
gulp.task('svgsprite-clean', function (cb) {
del(['./src/sass/img/sprite.svg','./src/sass/_svgsprite.scss'], cb);
});
// Configuring paths and options for different environments
env = process.env.NODE_ENV || 'dev';
if (env === 'dev') {
outputDir = 'builds/development/';
sassStyle = 'expanded';
sassComments = true;
} else {
outputDir = 'builds/production/';
sassStyle = 'compressed';
sassComments = false;
}
//и потом к примеру в стилях у меня
....
.pipe(gulpIf(env !== 'dev', cleanCSS({compatibility: 'ie8'})))
// в js
...
.pipe(gulpIf(env !== 'dev', uglify()))
....
просто меняю env на === и собираю стили и скрипты для продакшн (оптимизированы)
и т.д по сути заменяя лишь значения с !== на === собираются 2 сборки: или builds/development /или builds/production/
.pipe(gulp.dest(outputDir + 'css'))
svgoPlugins: [{removeViewBox: false}], возникла после обновления imagemin-svgo до версии 5.2.1
gulp = require('gulp'),
sass = require('gulp-ruby-sass'),
autoPrefixer = require('gulp-autoprefixer'),
cleanCSS = require('gulp-clean-css'),
uglify = require('gulp-uglify'),
minifyHTML = require('gulp-minify-html'),
imageMin = require('gulp-imagemin'),
pngquant = require('imagemin-pngquant'),
jsHint = require('gulp-jshint'),
concat = require('gulp-concat'),
cache = require('gulp-cache'),
del = require('del'),
gulpFilter = require('gulp-filter'),
mainBowerFiles = require('main-bower-files'),
connect = require('gulp-connect'),
gulpIf = require('gulp-if'),
util = require('gulp-util'),
plumber = require('gulp-plumber'),
rigger = require('gulp-rigger'),
spritesmith = require('gulp.spritesmith'),
size = require('gulp-size'),
opn = require('opn');
Есть ли профессии типо java front-end или что-то такое?
/usr/bin/node /home/**********/Dropbox/Projects/Work2016/eGARAGE/node_modules/gulp/bin/gulp.js --color --gulpfile /home/**********/Dropbox/Projects/Work2016/eGARAGE/gulpfile.js default
[23:54:08] Using gulpfile ~/Dropbox/Projects/Work2016/eGARAGE/gulpfile.js
[23:54:08] Starting 'styles:vendor'...
[23:54:08] Finished 'styles:vendor' after 70 ms
[23:54:08] Starting 'styles'...
[23:54:08] Finished 'styles' after 21 ms
[23:54:08] Starting 'js:vendor'...
[23:54:08] Finished 'js:vendor' after 15 ms
[23:54:08] Starting 'js'...
[23:54:08] Finished 'js' after 11 ms
[23:54:08] Starting 'images'...
[23:54:08] Starting 'sprite'...
[23:54:08] Starting 'fonts'...
[23:54:08] Starting 'html'...
[23:54:08] Finished 'html' after 4.28 ms
[23:54:08] Starting 'webServer'...
[23:54:08] Finished 'webServer' after 19 ms
[23:54:08] Starting 'openBrowser'...
[23:54:08] Finished 'openBrowser' after 7.64 ms
[23:54:08] Starting 'watch'...
[23:54:08] Finished 'watch' after 81 ms
[23:54:08] Server started http://localhost:9001
[23:54:08] LiveReload started on port 35729
[23:54:09] Starting 'styles'...
[23:54:09] Finished 'styles' after 9.13 ms
[23:54:10] Finished 'sprite' after 1.84 s
[23:54:10] Starting 'html'...
[23:54:10] Finished 'html' after 6.94 ms
[23:54:10] Finished 'fonts' after 1.91 s
[23:54:19] gulp-ruby-sass: write main.css
[23:54:20] gulp-ruby-sass: write main.css
[23:54:24] gulp-imagemin: Minified 14 images (saved 715.14 kB - 22%)
[23:54:24] Finished 'images' after 17 s
[23:54:24] Starting 'build'...
[23:54:24] Finished 'build' after 13 μs
[23:54:24] Starting 'default'...
[23:54:24] Finished 'default' after 9.83 μs
// Concat vendor JS (uglify for production)
gulp.task('js:vendor', function() {
gulp.src(mainBowerFiles({
"overrides": {
"jquery": {
"main": "./dist/jquery.min.js"
},
"magnific-popup": {
"main": "./dist/jquery.magnific-popup.min.js"
},
"slick-carousel": {
"main": "./slick/slick.min.js"
},
"jquery.maskedinput": {
"main": "./dist/jquery.maskedinput.min.js"
},
"jqueryrotate": {
"main": "./jQueryRotate.js"
}
}
}))
.pipe(jsFilter)
.pipe(concat('vendor.js'))
.pipe(gulpIf(env !== 'dev', uglify()))
.pipe(gulp.dest(outputDir + 'js'))
});
gulp.task('js', function() {
gulp.src(src.js)
.pipe(jsHint())
.pipe(jsHint.reporter('default'))
.pipe(concat('script.js'))
.pipe(gulpIf(env !== 'dev', uglify()))
.pipe(gulp.dest(outputDir + 'js'))
.pipe(connect.reload());
});