Вот мой gulpfile. js код.
"use strict";
var gulp = require("gulp"),
autoprefixer = require("gulp-autoprefixer"),
cssbeautify = require("gulp-cssbeautify"),
removeComments = require('gulp-strip-css-comments'),
rename = require("gulp-rename"),
sass = require("gulp-sass"),
cssnano = require("gulp-cssnano"),
rigger = require("gulp-rigger"),
uglify = require("gulp-uglify"),
watch = require("gulp-watch"),
plumber = require("gulp-plumber"),
imagemin = require("gulp-imagemin"),
run = require("gulp4-run-sequence"),
rimraf = require("rimraf"),
webserver = require("browser-sync");
/* Paths to source/build/watch files
=========================*/
var path = {
build: {
html: "dist/",
js: "dist/assets/js/",
css: "dist/assets/css/",
img: "dist/assets/i/",
fonts: "dist/assets/fonts/",
json: "dist/assets/"
},
src: {
html: "src/*.{htm,html,php}",
js: "src/assets/js/*.js",
css: "src/assets/sass/style.scss",
img: "src/assets/i/**/*.*",
fonts: "src/assets/fonts/**/*.*",
json: "src/assets/*.json"
},
watch: {
html: "src/**/*.{htm,html,php}",
js: "src/assets/js/**/*.js",
css: "src/assets/sass/**/*.scss",
img: "src/assets/i/**/*.*",
fonts: "src/assets/fonts/**/*.*",
json: "src/assets/*.json"
},
clean: "./dist"
};
/* Webserver config
=========================*/
var config = {
server: "dist/",
notify: false,
open: true,
ui: false
};
/* Tasks
=========================*/
gulp.task("webserver", function () {
webserver(config);
});
gulp.task("html:build", function () {
return gulp.src(path.src.html)
.pipe(plumber())
.pipe(rigger())
.pipe(gulp.dest(path.build.html))
.pipe(webserver.reload({stream: true}));
});
gulp.task("css:build", function () {
return gulp.src(path.src.css)
.pipe(plumber())
.pipe(sass().on('error', sass.logError))
.pipe(autoprefixer({
overrideBrowserslist: ["last 8 versions"],
cascade: true
}))
.pipe(cssbeautify())
.pipe(gulp.dest(path.build.css))
.pipe(cssnano({
zindex: false,
discardComments: {
removeAll: true
}
}))
.pipe(removeComments())
.pipe(rename("style.min.css"))
.pipe(gulp.dest(path.build.css))
.pipe(webserver.reload({stream: true}));
});
gulp.task("js:build", function () {
return gulp.src(path.src.js)
.pipe(plumber())
.pipe(rigger())
.pipe(gulp.dest(path.build.js))
.pipe(uglify())
.pipe(rename("main.min.js"))
.pipe(gulp.dest(path.build.js))
.pipe(webserver.reload({stream: true}));
});
gulp.task("fonts:build", function() {
return gulp.src(path.src.fonts)
.pipe(gulp.dest(path.build.fonts));
});
gulp.task("image:build", function () {
return gulp.src(path.src.img)
.pipe(imagemin({
optimizationLevel: 3,
progressive: true,
svgoPlugins: [{removeViewBox: false}],
interlaced: true
}))
.pipe(gulp.dest(path.build.img));
});
gulp.task("json:build", function() {
return gulp.src(path.src.json)
.pipe(gulp.dest(path.build.json));
});
gulp.task("clean", function (cb) {
rimraf(path.clean, cb);
});
gulp.task("build", function (cb) {
run(
"clean",
"html:build",
"css:build",
"js:build",
"fonts:build",
"image:build",
"json:build"
, cb);
});
gulp.task("watch", function() {
gulp.watch(path.watch.html, gulp.parallel("html:build"));
gulp.watch(path.watch.css, gulp.parallel("css:build"));
gulp.watch(path.watch.js, gulp.parallel("js:build"));
gulp.watch(path.watch.img, gulp.parallel("image:build"));
gulp.watch(path.watch.fonts, gulp.parallel("fonts:build"));
gulp.watch(path.watch.json, gulp.parallel("json:build"))
});
gulp.task("default", function (cb) {
run(
"clean",
"build",
"webserver",
"watch"
, cb);
});
Работает хорошо, за исключением одной вещи. Там нет онлайн отслеживания изменений (глоток часы). Проект редактируется в папке «src /», но файлы сохраняются в другой папке «dist /». Может быть, это проблема?