Прохожу курс по вёрстке от WebForMySelf и в 3 уроке мы собираем проект на Gulp. Делал всё по уроку, только удалил модуль pngquant(он у меня не работает, пишет, что система не подходит).
Вот package.json
{
"name": "fashion",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "gulp build",
"start": "npm run build && gulp serve"
},
"author": "",
"license": "ISC",
"devDependencies": {
"browser-sync": "^2.26.3",
"del": "^4.1.0",
"gulp": "^4.0.0",
"gulp-autoprefixer": "^6.0.0",
"gulp-cheerio": "^0.6.3",
"gulp-imagemin": "^5.0.3",
"gulp-plumber": "^1.2.1",
"gulp-replace": "^1.0.0",
"gulp-sass": "^4.0.2",
"gulp-sourcemaps": "^2.6.5",
"gulp-svg-sprite": "^1.5.0",
"gulp-svgmin": "^2.2.0",
"imagemin-jpeg-recompress": "^6.0.0",
"run-sequence": "^2.2.1"
}
}
Вот сам gulpfile.js (мой)
const gulp = require('gulp');
const sass = require('gulp-sass');
const plumber = require('gulp-plumber');
const autoprefixer = require('gulp-autoprefixer');
const browserSync = require('browser-sync').create();
const sourceMaps = require('gulp-sourcemaps');
const imagemin = require("gulp-imagemin");
const imageminJpegRecompress = require('imagemin-jpeg-recompress');
const run = require("run-sequence");
const del = require("del");
const svgSprite = require('gulp-svg-sprite');
const svgmin = require('gulp-svgmin');
const cheerio = require('gulp-cheerio');
const replace = require('gulp-replace');
gulp.task('sass', function () {
return gulp.src('scss/style.scss')
.pipe(plumber())
.pipe(sourceMaps.init())
.pipe(sass())
.pipe(autoprefixer({
browsers: ['last 2 version']
}))
.pipe(sourceMaps.write())
.pipe(gulp.dest('build/css'))
.pipe(browserSync.reload({stream: true}));
});
gulp.task('html', function () {
return gulp.src('*.html')
.pipe(gulp.dest('build'))
.pipe(browserSync.reload({stream: true}));
});
gulp.task('js', function () {
return gulp.src('js/**/*.js')
.pipe(gulp.dest('build/js'))
.pipe(browserSync.reload({stream: true}));
});
gulp.task('css', function () {
return gulp.src('css/**/*.css')
.pipe(gulp.dest('build/css'))
.pipe(browserSync.reload({stream: true}));
});
gulp.task('allimg', function () {
return gulp.src('img/**/*.jpg')
.pipe(gulp.dest('build/img'))
.pipe(browserSync.reload({stream: true}));
});
gulp.task('images', function () {
return gulp.src('build/img/**/*.jpg')
.pipe(imagemin([
imagemin.jpegtran({progressive: true}),
imageminJpegRecompress({
loops: 5,
min: 65,
max: 70,
quality: 'medium'
}),
imagemin.optipng({optimizationLevel: 3})
]))
.pipe(gulp.dest('build/img'));
});
gulp.task('svg', function () {
return gulp.src('img/**/*.svg')
.pipe(svgmin({
js2svg: {
pretty: true
}
}))
.pipe(cheerio({
run: function ($) {
$('[fill]').removeAttr('fill');
$('[stroke]').removeAttr('stroke');
$('[style]').removeAttr('style');
},
parserOptions: {xmlMode: true}
}))
.pipe(replace('>', '>'))
// build svg sprite
.pipe(svgSprite({
mode: {
symbol: {
sprite: "sprite.svg"
}
}
}))
.pipe(gulp.dest('build/img'));
});
gulp.task('serve', function () {
browserSync.init({
server: "build"
});
gulp.watch("scss/**/*.scss", ["sass"]);
gulp.watch("*.html", ["html"]);
gulp.watch("js/**/*.js", ["js"]);
gulp.watch("css/**/*.css", ["css"]);
gulp.watch("img/**/*.jpg", ["allimg"]);
gulp.watch("img/**/*.{svg}", ["svg"]);
});
gulp.task('copy', function () {
return gulp.src([
'img/**',
'js/**',
'css/**',
'*.html'
], {
base: '.'
})
.pipe(gulp.dest('build'));
});
gulp.task('clean', function () {
return del('build');
});
gulp.task('build', function (fn) {
run(
'clean',
'copy',
'sass',
'images',
'svg',
fn
);
});
Вот изначальный
const gulp = require('gulp');
const sass = require('gulp-sass');
const plumber = require('gulp-plumber');
const autoprefixer = require('gulp-autoprefixer');
const browserSync = require('browser-sync').create();
const sourceMaps = require('gulp-sourcemaps');
const imagemin = require("gulp-imagemin");
const imageminJpegRecompress = require('imagemin-jpeg-recompress');
const pngquant = require('imagemin-pngquant');
const run = require("run-sequence");
const del = require("del");
const svgSprite = require('gulp-svg-sprite');
const svgmin = require('gulp-svgmin');
const cheerio = require('gulp-cheerio');
const replace = require('gulp-replace');
gulp.task('sass', function () {
return gulp.src('scss/style.scss')
.pipe(plumber())
.pipe(sourceMaps.init())
.pipe(sass())
.pipe(autoprefixer({
browsers: ['last 2 version']
}))
.pipe(sourceMaps.write())
.pipe(gulp.dest('build/css'))
.pipe(browserSync.reload({stream: true}));
});
gulp.task('html', function () {
return gulp.src('*.html')
.pipe(gulp.dest('build'))
.pipe(browserSync.reload({stream: true}));
});
gulp.task('js', function () {
return gulp.src('js/**/*.js')
.pipe(gulp.dest('build/js'))
.pipe(browserSync.reload({stream: true}));
});
gulp.task('css', function () {
return gulp.src('css/**/*.css')
.pipe(gulp.dest('build/css'))
.pipe(browserSync.reload({stream: true}));
});
gulp.task('allimg', function () {
return gulp.src('img/**/*.{png,jpg}')
.pipe(gulp.dest('build/img'))
.pipe(browserSync.reload({stream: true}));
});
gulp.task('images', function () {
return gulp.src('build/img/**/*.{png,jpg}')
.pipe(imagemin([
imagemin.jpegtran({progressive: true}),
imageminJpegRecompress({
loops: 5,
min: 65,
max: 70,
quality: 'medium'
}),
imagemin.optipng({optimizationLevel: 3}),
pngquant({quality: '65-70', speed: 5})
]))
.pipe(gulp.dest('build/img'));
});
gulp.task('svg', function () {
return gulp.src('img/**/*.svg')
.pipe(svgmin({
js2svg: {
pretty: true
}
}))
.pipe(cheerio({
run: function ($) {
$('[fill]').removeAttr('fill');
$('[stroke]').removeAttr('stroke');
$('[style]').removeAttr('style');
},
parserOptions: {xmlMode: true}
}))
.pipe(replace('>', '>'))
// build svg sprite
.pipe(svgSprite({
mode: {
symbol: {
sprite: "sprite.svg"
}
}
}))
.pipe(gulp.dest('build/img'));
});
gulp.task('serve', function () {
browserSync.init({
server: "build"
});
gulp.watch("scss/**/*.scss", ["sass"]);
gulp.watch("*.html", ["html"]);
gulp.watch("js/**/*.js", ["js"]);
gulp.watch("css/**/*.css", ["css"]);
gulp.watch("img/**/*.{png,jpg}", ["allimg"]);
gulp.watch("img/**/*.{svg}", ["svg"]);
});
gulp.task('copy', function () {
return gulp.src([
'img/**',
'js/**',
'css/**',
'*.html'
], {
base: '.'
})
.pipe(gulp.dest('build'));
});
gulp.task('clean', function () {
return del('build');
});
gulp.task('build', function (fn) {
run(
'clean',
'copy',
'sass',
'images',
'svg',
fn
);
});
