Skip to content

Instantly share code, notes, and snippets.

@belocer

belocer/gulpfile.js

Last active Sep 26, 2020
Embed
What would you like to do?
Gulp 4
let preprocessor = 'less';
const { src, dest, parallel, series, watch } = require('gulp');
const browserSync = require('browser-sync').create();
const concat = require('gulp-concat');
const uglify = require('gulp-uglify-es').default;
const sass = require('gulp-sass');
const less = require('gulp-less');
const autoprefixer = require('gulp-autoprefixer');
const gcmq = require('gulp-group-css-media-queries');
const smartGrid = require('smart-grid');
const sourcemaps = require('gulp-sourcemaps');
const cleancss = require('gulp-clean-css');
const imagemin = require('gulp-imagemin');
const newer = require('gulp-newer');
const del = require('del');
function browsersync () {
browserSync.init({
server: {
baseDir: 'app/',
notify: false,
online: true
}
});
}
function scripts () {
return src([
'node_modules/jquery/dist/jquery.min.js',
'app/js/app.js',
])
.pipe(concat('app.min.js'))
.pipe(uglify())
.pipe(dest('app/js/'))
.pipe(browserSync.stream());
}
function styles () {
return src([
'app/'+ preprocessor +'/main.'+ preprocessor,
])
.pipe(sourcemaps.init())
.pipe(eval(preprocessor)())
.pipe(concat('app.min.css'))
.pipe(autoprefixer({ overrideBrowserslist: ['last 10 versions'], grid: true }))
.pipe(gcmq())
.pipe(cleancss(( { level: { 1: { specialComments: 0 } }/*, format: 'beautify'*/ } )))
.pipe(dest('app/css/'))
.pipe(browserSync.stream());
}
function images () {
return src('app/img/src/**/*')
.pipe(newer('app/img/dest/'))
.pipe(imagemin())
.pipe(dest('app/img/dest/'));
}
function startwatch () {
watch('app/**/' + preprocessor + '/**/*', styles);
watch(['app/**/*.js', '!app/**/*.min.js'], scripts);
watch('app/**/*.html').on('change', browserSync.reload);
watch('app/img/src/**/*', images);
}
function cleanimg () {
return del('app/img/dest/**/*', {force: true});
}
function cleandist () {
return del('app/dist/**/*', {force: true});
}
function buildcopy () {
return src([
'app/css/**/*.min.css',
'app/js/**/*.min.js',
'app/img/dest/**/*',
'app/**/*.html',
], { base: 'app'})
.pipe(dest('dist'));
}
const smartGridConf = {
outputStyle: preprocessor,
columns: 10,
offset: '15px',
mobileFirst: false,
container: {
maxWidth: '1410px',
fields: '15px'
},
breakPoints: {
slg: {
width: '2560px',
fields: '15px'
},
lg: {
width: '1410px',
fields: '15px'
},
smd: {
width: '1100px',
fields: '15px'
},
md: {
width: '960px',
fields: '15px'
},
sm: {
width: '720px',
fields: '10px'
},
xs: {
width: '321px',
fields: '5px'
},
my: {
width: '1175px',
fields: '15px'
}
}
}
function grid () {
smartGrid('app/' + preprocessor, smartGridConf)
}
exports.browsersync = browsersync;
exports.scripts = scripts;
exports.styles = styles;
exports.images = images;
exports.cleanimg = cleanimg;
exports.grid = grid;
exports.build = series(cleandist, styles, scripts, images, buildcopy);
exports.default = parallel(styles, scripts, browsersync, startwatch);
// Собрать сборку gulp build
// Запустить gulp
// Удалить все изображения gulp cleanimg
// Генерировать сетку SmartGrid Дмитрия Лаврика gulp grid
{
"name": "project",
"version": "1.0.0",
"description": "",
"main": "gulpfile.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+https://belocer@bitbucket.org/purpleplane/frontendcs.git"
},
"author": "",
"license": "ISC",
"homepage": "https://bitbucket.org/purpleplane/frontendcs#readme",
"devDependencies": {
"browser-sync": "^2.26.12",
"del": "^6.0.0",
"gulp": "^4.0.2",
"gulp-autoprefixer": "^7.0.1",
"gulp-clean-css": "^4.3.0",
"gulp-concat": "^2.6.1",
"gulp-group-css-media-queries": "^1.2.2",
"gulp-imagemin": "^7.1.0",
"gulp-less": "^4.0.1",
"gulp-newer": "^1.4.0",
"gulp-sass": "^4.1.0",
"gulp-sourcemaps": "^2.6.5",
"gulp-uglify-es": "^2.0.0",
"jquery": "^3.5.1",
"smart-grid": "^2.1.2"
},
"dependencies": {}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment