Mixing
Modify gulpfile.js (gulp 4.0)
This is the old configuration file.
Current gulp version is 4.0
How to modify this configuration file through gulp.series(), gulp.parallel() ?
I see all the translated tutorials, don't very understanding.
How to modify this configuration file (gulp 4.0 > gulp watch, gulp.series, gulp.parallel) ?
Thanks
var gulp = require("gulp"),
sass = require("gulp-sass"),
autoPrefixer = require("gulp-autoprefixer"),
minifyCss = require("gulp-clean-css"),
rename = require("gulp-rename"),
concat = require("gulp-concat"),
uglify = require("gulp-uglify"),
plumber = require("gulp-plumber"),
util = require("gulp-util"),
browserSync = require("browser-sync").create(),
reload = browserSync.reload;
var srcs = {
"html": ["./**/*.html"],
"css": ["./assets/css/**/*.css"],
"sass": ["./assets/sass/**/*.scss"],
"js": ["./assets/js/*.js"],
};
gulp.task("default", ["browser-sync"]);
gulp.task("sass", function (done) {
return gulp.src("./assets/sass/sys.scss")
.pipe(plumber())
.pipe(sass())
.pipe(autoPrefixer({
browsers: ["> 5%", "last 2 versions", "not ie <=8"],
cascade: true,
remove: true
}))
.pipe(rename({
basename: "sys"
}))
.pipe(gulp.dest("./assets/css"))
.pipe(reload({
stream: true
}))
.pipe(minifyCss())
.pipe(rename({
suffix: ".m"
}))
.pipe(gulp.dest("./assets/css"))
.pipe(reload({
stream: true
}));
util.log(util.colors.yellow("website styles compied and minified"));
});
gulp.task("js", function (done) {
return gulp.src("./assets/js/sys.js")
.pipe(reload({
stream: true
}));
});
gulp.task("browser-sync", ["sass", "js"], function () {
browserSync.init({
server: {
baseDir: "./"
},
browser: ["google chrome"]
});
gulp.watch(srcs.html).on("change", reload);
gulp.watch(srcs.sass, ["sass"]);
gulp.watch(srcs.js, ["js"]);
});
gulp gulp-watch gulp-browser-sync
asked Jan 2 at 6:18
PhoenixPhoenix
1817
add a comment |
This is the old configuration file.
Current gulp version is 4.0
How to modify this configuration file through gulp.series(), gulp.parallel() ?
I see all the translated tutorials, don't very understanding.
How to modify this configuration file (gulp 4.0 > gulp watch, gulp.series, gulp.parallel) ?
Thanks
var gulp = require("gulp"),
sass = require("gulp-sass"),
autoPrefixer = require("gulp-autoprefixer"),
minifyCss = require("gulp-clean-css"),
rename = require("gulp-rename"),
concat = require("gulp-concat"),
uglify = require("gulp-uglify"),
plumber = require("gulp-plumber"),
util = require("gulp-util"),
browserSync = require("browser-sync").create(),
reload = browserSync.reload;
var srcs = {
"html": ["./**/*.html"],
"css": ["./assets/css/**/*.css"],
"sass": ["./assets/sass/**/*.scss"],
"js": ["./assets/js/*.js"],
};
gulp.task("default", ["browser-sync"]);
gulp.task("sass", function (done) {
return gulp.src("./assets/sass/sys.scss")
.pipe(plumber())
.pipe(sass())
.pipe(autoPrefixer({
browsers: ["> 5%", "last 2 versions", "not ie <=8"],
cascade: true,
remove: true
}))
.pipe(rename({
basename: "sys"
}))
.pipe(gulp.dest("./assets/css"))
.pipe(reload({
stream: true
}))
.pipe(minifyCss())
.pipe(rename({
suffix: ".m"
}))
.pipe(gulp.dest("./assets/css"))
.pipe(reload({
stream: true
}));
util.log(util.colors.yellow("website styles compied and minified"));
});
gulp.task("js", function (done) {
return gulp.src("./assets/js/sys.js")
.pipe(reload({
stream: true
}));
});
gulp.task("browser-sync", ["sass", "js"], function () {
browserSync.init({
server: {
baseDir: "./"
},
browser: ["google chrome"]
});
gulp.watch(srcs.html).on("change", reload);
gulp.watch(srcs.sass, ["sass"]);
gulp.watch(srcs.js, ["js"]);
});
gulp gulp-watch gulp-browser-sync
asked Jan 2 at 6:18
PhoenixPhoenix
1817
add a comment |
This is the old configuration file.
Current gulp version is 4.0
How to modify this configuration file through gulp.series(), gulp.parallel() ?
I see all the translated tutorials, don't very understanding.
How to modify this configuration file (gulp 4.0 > gulp watch, gulp.series, gulp.parallel) ?
Thanks
var gulp = require("gulp"),
sass = require("gulp-sass"),
autoPrefixer = require("gulp-autoprefixer"),
minifyCss = require("gulp-clean-css"),
rename = require("gulp-rename"),
concat = require("gulp-concat"),
uglify = require("gulp-uglify"),
plumber = require("gulp-plumber"),
util = require("gulp-util"),
browserSync = require("browser-sync").create(),
reload = browserSync.reload;
var srcs = {
"html": ["./**/*.html"],
"css": ["./assets/css/**/*.css"],
"sass": ["./assets/sass/**/*.scss"],
"js": ["./assets/js/*.js"],
};
gulp.task("default", ["browser-sync"]);
gulp.task("sass", function (done) {
return gulp.src("./assets/sass/sys.scss")
.pipe(plumber())
.pipe(sass())
.pipe(autoPrefixer({
browsers: ["> 5%", "last 2 versions", "not ie <=8"],
cascade: true,
remove: true
}))
.pipe(rename({
basename: "sys"
}))
.pipe(gulp.dest("./assets/css"))
.pipe(reload({
stream: true
}))
.pipe(minifyCss())
.pipe(rename({
suffix: ".m"
}))
.pipe(gulp.dest("./assets/css"))
.pipe(reload({
stream: true
}));
util.log(util.colors.yellow("website styles compied and minified"));
});
gulp.task("js", function (done) {
return gulp.src("./assets/js/sys.js")
.pipe(reload({
stream: true
}));
});
gulp.task("browser-sync", ["sass", "js"], function () {
browserSync.init({
server: {
baseDir: "./"
},
browser: ["google chrome"]
});
gulp.watch(srcs.html).on("change", reload);
gulp.watch(srcs.sass, ["sass"]);
gulp.watch(srcs.js, ["js"]);
});
gulp gulp-watch gulp-browser-sync
asked Jan 2 at 6:18
PhoenixPhoenix
1817
This is the old configuration file.
Current gulp version is 4.0
How to modify this configuration file through gulp.series(), gulp.parallel() ?
I see all the translated tutorials, don't very understanding.
How to modify this configuration file (gulp 4.0 > gulp watch, gulp.series, gulp.parallel) ?
Thanks
var gulp = require("gulp"),
sass = require("gulp-sass"),
autoPrefixer = require("gulp-autoprefixer"),
minifyCss = require("gulp-clean-css"),
rename = require("gulp-rename"),
concat = require("gulp-concat"),
uglify = require("gulp-uglify"),
plumber = require("gulp-plumber"),
util = require("gulp-util"),
browserSync = require("browser-sync").create(),
reload = browserSync.reload;
var srcs = {
"html": ["./**/*.html"],
"css": ["./assets/css/**/*.css"],
"sass": ["./assets/sass/**/*.scss"],
"js": ["./assets/js/*.js"],
};
gulp.task("default", ["browser-sync"]);
gulp.task("sass", function (done) {
return gulp.src("./assets/sass/sys.scss")
.pipe(plumber())
.pipe(sass())
.pipe(autoPrefixer({
browsers: ["> 5%", "last 2 versions", "not ie <=8"],
cascade: true,
remove: true
}))
.pipe(rename({
basename: "sys"
}))
.pipe(gulp.dest("./assets/css"))
.pipe(reload({
stream: true
}))
.pipe(minifyCss())
.pipe(rename({
suffix: ".m"
}))
.pipe(gulp.dest("./assets/css"))
.pipe(reload({
stream: true
}));
util.log(util.colors.yellow("website styles compied and minified"));
});
gulp.task("js", function (done) {
return gulp.src("./assets/js/sys.js")
.pipe(reload({
stream: true
}));
});
gulp.task("browser-sync", ["sass", "js"], function () {
browserSync.init({
server: {
baseDir: "./"
},
browser: ["google chrome"]
});
gulp.watch(srcs.html).on("change", reload);
gulp.watch(srcs.sass, ["sass"]);
gulp.watch(srcs.js, ["js"]);
});
gulp gulp-watch gulp-browser-sync
gulp gulp-watch gulp-browser-sync
asked Jan 2 at 6:18
PhoenixPhoenix
1817
asked Jan 2 at 6:18
PhoenixPhoenix
1817
edited Jan 2 at 6:41
Phoenix
asked Jan 2 at 6:18
PhoenixPhoenix
1817
asked Jan 2 at 6:18
PhoenixPhoenix
1817
asked Jan 2 at 6:18
PhoenixPhoenix
1817
1817
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
As of Gulp 4, there is no need to register tasks through task() method.
Gulp API will still support this approach, but usage of exporting is now primary approach to register tasks. ( see: https://gulpjs.com/docs/en/getting-started/creating-tasks )
Along with this new approach, all stream methods (src, dest, series, parallel, watch) can be defined through ES6 destructuring assignment feature as:
const {src, dest, watch, series, parallel} = require('gulp');
Also, cool feature in Gulp 4 regarding series and parallel is limitless nesting, so using this approach, you can avoid duplicating tasks.
(see: https://gulpjs.com/docs/en/api/series and https://gulpjs.com/docs/en/api/parallel)
So your gulpfile.js modified according to Gulp 4 features would look like this:
const {src, dest, watch, series, parallel} = require('gulp'); //ES destructuring assignment
var sass = require("gulp-sass"),
autoPrefixer = require("gulp-autoprefixer"),
minifyCss = require("gulp-clean-css"),
rename = require("gulp-rename"),
concat = require("gulp-concat"), //you don't use this anywhere. Avoid importing objects to reduce memory buffer overload
uglify = require("gulp-uglify"),//you don't use this anywhere. Avoid importing objects to reduce memory buffer overload
plumber = require("gulp-plumber"),
util = require("gulp-util"),
browserSync = require("browser-sync").create(),
reload = browserSync.reload;
var srcs = {
html: ["./**/*.html"],
css: ["./assets/css/**/*.css"],
sass: ["./assets/sass/**/*.scss"],
js: ["./assets/js/*.js"],
};
function sass() {
return src("./assets/sass/sys.scss")
.pipe(plumber())
.pipe(sass())
.pipe(autoPrefixer({
browsers: ["> 5%", "last 2 versions", "not ie <=8"],
cascade: true,
remove: true
}))
.pipe(rename({
basename: "sys"
}))
.pipe(dest("./assets/css"))
.pipe(reload({
stream: true
}))
.pipe(minifyCss())
.pipe(rename({
suffix: ".m"
}))
.pipe(dest("./assets/css"))
.pipe(reload({
stream: true
}));
util.log(util.colors.yellow("website styles compied and minified"));
}
function js(){
return src("./assets/js/sys.js")
.pipe(reload({
stream: true
})); //not sure if you intentionally did not put dest() stream method
}
function browser_sync(cb) {
browserSync.init({
server: {
baseDir: "./"
},
browser: ["google chrome"]
});
const watcher = watch(srcs.html);
watcher.on('change', reload);
watcher.on("change", reload);
watch(srcs.sass, series(sass));
watch(srcs.js, series(js));
cb();
}
//this will first trigger sass() and js() functions parallel, then after executing these two, browser_sync will run
exports.default = series(parallel(sass, js), browser_sync);
answered Jan 2 at 10:40
niklazniklaz
1,93911217
add a comment |
// don't need "done" callback function since you "return" the stream
gulp.task("sass", function () {
// all your stuff unchanged here
});
// don't need "done" callback function since you "return" the stream
gulp.task("js", function () {
return gulp.src("./assets/js/sys.js")
.pipe(reload({
stream: true
}));
});
// gulp.task('taskName', only one other parameter with the function call part of gulp.series
gulp.task("browser-sync", gulp.series("sass", "js", function () {
browserSync.init({
server: {
baseDir: "./"
},
browser: ["google chrome"]
});
gulp.watch(srcs.html).on("change", reload);
// don't need gulp.series below if only calling a single task
// but if you wanted it: gulp.watch(srcs.sass, gulp.series("sass"));
// It does seem that sometimes the gulp.series is needed even though the docs
// specifically say you don't when calling only a single task
gulp.watch(srcs.sass, "sass");
gulp.watch(srcs.js, "js");
}));
// move below to the bottom, if using gulp.task cannot call a task before it has been registered,
// i.e., gulp.task("browser-sync"........
gulp.task("default", "browser-sync");
See a good migration to gulp4 article.
There are many more gulp4 benefits if you completely change your tasks to functions as mentioned in the article or the gulpJS docs, exporting etc. But what is above should get you towards working gulp4 code.
answered Jan 2 at 7:58
MarkMark
14.6k34060
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54002054%2fmodify-gulpfile-js-gulp-4-0%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
As of Gulp 4, there is no need to register tasks through task() method.
Gulp API will still support this approach, but usage of exporting is now primary approach to register tasks. ( see: https://gulpjs.com/docs/en/getting-started/creating-tasks )
Along with this new approach, all stream methods (src, dest, series, parallel, watch) can be defined through ES6 destructuring assignment feature as:
const {src, dest, watch, series, parallel} = require('gulp');
Also, cool feature in Gulp 4 regarding series and parallel is limitless nesting, so using this approach, you can avoid duplicating tasks.
(see: https://gulpjs.com/docs/en/api/series and https://gulpjs.com/docs/en/api/parallel)
So your gulpfile.js modified according to Gulp 4 features would look like this:
const {src, dest, watch, series, parallel} = require('gulp'); //ES destructuring assignment
var sass = require("gulp-sass"),
autoPrefixer = require("gulp-autoprefixer"),
minifyCss = require("gulp-clean-css"),
rename = require("gulp-rename"),
concat = require("gulp-concat"), //you don't use this anywhere. Avoid importing objects to reduce memory buffer overload
uglify = require("gulp-uglify"),//you don't use this anywhere. Avoid importing objects to reduce memory buffer overload
plumber = require("gulp-plumber"),
util = require("gulp-util"),
browserSync = require("browser-sync").create(),
reload = browserSync.reload;
var srcs = {
html: ["./**/*.html"],
css: ["./assets/css/**/*.css"],
sass: ["./assets/sass/**/*.scss"],
js: ["./assets/js/*.js"],
};
function sass() {
return src("./assets/sass/sys.scss")
.pipe(plumber())
.pipe(sass())
.pipe(autoPrefixer({
browsers: ["> 5%", "last 2 versions", "not ie <=8"],
cascade: true,
remove: true
}))
.pipe(rename({
basename: "sys"
}))
.pipe(dest("./assets/css"))
.pipe(reload({
stream: true
}))
.pipe(minifyCss())
.pipe(rename({
suffix: ".m"
}))
.pipe(dest("./assets/css"))
.pipe(reload({
stream: true
}));
util.log(util.colors.yellow("website styles compied and minified"));
}
function js(){
return src("./assets/js/sys.js")
.pipe(reload({
stream: true
})); //not sure if you intentionally did not put dest() stream method
}
function browser_sync(cb) {
browserSync.init({
server: {
baseDir: "./"
},
browser: ["google chrome"]
});
const watcher = watch(srcs.html);
watcher.on('change', reload);
watcher.on("change", reload);
watch(srcs.sass, series(sass));
watch(srcs.js, series(js));
cb();
}
//this will first trigger sass() and js() functions parallel, then after executing these two, browser_sync will run
exports.default = series(parallel(sass, js), browser_sync);
answered Jan 2 at 10:40
niklazniklaz
1,93911217
add a comment |
As of Gulp 4, there is no need to register tasks through task() method.
Gulp API will still support this approach, but usage of exporting is now primary approach to register tasks. ( see: https://gulpjs.com/docs/en/getting-started/creating-tasks )
Along with this new approach, all stream methods (src, dest, series, parallel, watch) can be defined through ES6 destructuring assignment feature as:
const {src, dest, watch, series, parallel} = require('gulp');
Also, cool feature in Gulp 4 regarding series and parallel is limitless nesting, so using this approach, you can avoid duplicating tasks.
(see: https://gulpjs.com/docs/en/api/series and https://gulpjs.com/docs/en/api/parallel)
So your gulpfile.js modified according to Gulp 4 features would look like this:
const {src, dest, watch, series, parallel} = require('gulp'); //ES destructuring assignment
var sass = require("gulp-sass"),
autoPrefixer = require("gulp-autoprefixer"),
minifyCss = require("gulp-clean-css"),
rename = require("gulp-rename"),
concat = require("gulp-concat"), //you don't use this anywhere. Avoid importing objects to reduce memory buffer overload
uglify = require("gulp-uglify"),//you don't use this anywhere. Avoid importing objects to reduce memory buffer overload
plumber = require("gulp-plumber"),
util = require("gulp-util"),
browserSync = require("browser-sync").create(),
reload = browserSync.reload;
var srcs = {
html: ["./**/*.html"],
css: ["./assets/css/**/*.css"],
sass: ["./assets/sass/**/*.scss"],
js: ["./assets/js/*.js"],
};
function sass() {
return src("./assets/sass/sys.scss")
.pipe(plumber())
.pipe(sass())
.pipe(autoPrefixer({
browsers: ["> 5%", "last 2 versions", "not ie <=8"],
cascade: true,
remove: true
}))
.pipe(rename({
basename: "sys"
}))
.pipe(dest("./assets/css"))
.pipe(reload({
stream: true
}))
.pipe(minifyCss())
.pipe(rename({
suffix: ".m"
}))
.pipe(dest("./assets/css"))
.pipe(reload({
stream: true
}));
util.log(util.colors.yellow("website styles compied and minified"));
}
function js(){
return src("./assets/js/sys.js")
.pipe(reload({
stream: true
})); //not sure if you intentionally did not put dest() stream method
}
function browser_sync(cb) {
browserSync.init({
server: {
baseDir: "./"
},
browser: ["google chrome"]
});
const watcher = watch(srcs.html);
watcher.on('change', reload);
watcher.on("change", reload);
watch(srcs.sass, series(sass));
watch(srcs.js, series(js));
cb();
}
//this will first trigger sass() and js() functions parallel, then after executing these two, browser_sync will run
exports.default = series(parallel(sass, js), browser_sync);
answered Jan 2 at 10:40
niklazniklaz
1,93911217
add a comment |
As of Gulp 4, there is no need to register tasks through task() method.
Gulp API will still support this approach, but usage of exporting is now primary approach to register tasks. ( see: https://gulpjs.com/docs/en/getting-started/creating-tasks )
Along with this new approach, all stream methods (src, dest, series, parallel, watch) can be defined through ES6 destructuring assignment feature as:
const {src, dest, watch, series, parallel} = require('gulp');
Also, cool feature in Gulp 4 regarding series and parallel is limitless nesting, so using this approach, you can avoid duplicating tasks.
(see: https://gulpjs.com/docs/en/api/series and https://gulpjs.com/docs/en/api/parallel)
So your gulpfile.js modified according to Gulp 4 features would look like this:
const {src, dest, watch, series, parallel} = require('gulp'); //ES destructuring assignment
var sass = require("gulp-sass"),
autoPrefixer = require("gulp-autoprefixer"),
minifyCss = require("gulp-clean-css"),
rename = require("gulp-rename"),
concat = require("gulp-concat"), //you don't use this anywhere. Avoid importing objects to reduce memory buffer overload
uglify = require("gulp-uglify"),//you don't use this anywhere. Avoid importing objects to reduce memory buffer overload
plumber = require("gulp-plumber"),
util = require("gulp-util"),
browserSync = require("browser-sync").create(),
reload = browserSync.reload;
var srcs = {
html: ["./**/*.html"],
css: ["./assets/css/**/*.css"],
sass: ["./assets/sass/**/*.scss"],
js: ["./assets/js/*.js"],
};
function sass() {
return src("./assets/sass/sys.scss")
.pipe(plumber())
.pipe(sass())
.pipe(autoPrefixer({
browsers: ["> 5%", "last 2 versions", "not ie <=8"],
cascade: true,
remove: true
}))
.pipe(rename({
basename: "sys"
}))
.pipe(dest("./assets/css"))
.pipe(reload({
stream: true
}))
.pipe(minifyCss())
.pipe(rename({
suffix: ".m"
}))
.pipe(dest("./assets/css"))
.pipe(reload({
stream: true
}));
util.log(util.colors.yellow("website styles compied and minified"));
}
function js(){
return src("./assets/js/sys.js")
.pipe(reload({
stream: true
})); //not sure if you intentionally did not put dest() stream method
}
function browser_sync(cb) {
browserSync.init({
server: {
baseDir: "./"
},
browser: ["google chrome"]
});
const watcher = watch(srcs.html);
watcher.on('change', reload);
watcher.on("change", reload);
watch(srcs.sass, series(sass));
watch(srcs.js, series(js));
cb();
}
//this will first trigger sass() and js() functions parallel, then after executing these two, browser_sync will run
exports.default = series(parallel(sass, js), browser_sync);
answered Jan 2 at 10:40
niklazniklaz
1,93911217
As of Gulp 4, there is no need to register tasks through task() method.
Gulp API will still support this approach, but usage of exporting is now primary approach to register tasks. ( see: https://gulpjs.com/docs/en/getting-started/creating-tasks )
Along with this new approach, all stream methods (src, dest, series, parallel, watch) can be defined through ES6 destructuring assignment feature as:
const {src, dest, watch, series, parallel} = require('gulp');
Also, cool feature in Gulp 4 regarding series and parallel is limitless nesting, so using this approach, you can avoid duplicating tasks.
(see: https://gulpjs.com/docs/en/api/series and https://gulpjs.com/docs/en/api/parallel)
So your gulpfile.js modified according to Gulp 4 features would look like this:
const {src, dest, watch, series, parallel} = require('gulp'); //ES destructuring assignment
var sass = require("gulp-sass"),
autoPrefixer = require("gulp-autoprefixer"),
minifyCss = require("gulp-clean-css"),
rename = require("gulp-rename"),
concat = require("gulp-concat"), //you don't use this anywhere. Avoid importing objects to reduce memory buffer overload
uglify = require("gulp-uglify"),//you don't use this anywhere. Avoid importing objects to reduce memory buffer overload
plumber = require("gulp-plumber"),
util = require("gulp-util"),
browserSync = require("browser-sync").create(),
reload = browserSync.reload;
var srcs = {
html: ["./**/*.html"],
css: ["./assets/css/**/*.css"],
sass: ["./assets/sass/**/*.scss"],
js: ["./assets/js/*.js"],
};
function sass() {
return src("./assets/sass/sys.scss")
.pipe(plumber())
.pipe(sass())
.pipe(autoPrefixer({
browsers: ["> 5%", "last 2 versions", "not ie <=8"],
cascade: true,
remove: true
}))
.pipe(rename({
basename: "sys"
}))
.pipe(dest("./assets/css"))
.pipe(reload({
stream: true
}))
.pipe(minifyCss())
.pipe(rename({
suffix: ".m"
}))
.pipe(dest("./assets/css"))
.pipe(reload({
stream: true
}));
util.log(util.colors.yellow("website styles compied and minified"));
}
function js(){
return src("./assets/js/sys.js")
.pipe(reload({
stream: true
})); //not sure if you intentionally did not put dest() stream method
}
function browser_sync(cb) {
browserSync.init({
server: {
baseDir: "./"
},
browser: ["google chrome"]
});
const watcher = watch(srcs.html);
watcher.on('change', reload);
watcher.on("change", reload);
watch(srcs.sass, series(sass));
watch(srcs.js, series(js));
cb();
}
//this will first trigger sass() and js() functions parallel, then after executing these two, browser_sync will run
exports.default = series(parallel(sass, js), browser_sync);
answered Jan 2 at 10:40
niklazniklaz
1,93911217
edited Jan 2 at 10:46
answered Jan 2 at 10:40
niklazniklaz
1,93911217
answered Jan 2 at 10:40
niklazniklaz
1,93911217
answered Jan 2 at 10:40
niklazniklaz
1,93911217
1,93911217
add a comment |
add a comment |
// don't need "done" callback function since you "return" the stream
gulp.task("sass", function () {
// all your stuff unchanged here
});
// don't need "done" callback function since you "return" the stream
gulp.task("js", function () {
return gulp.src("./assets/js/sys.js")
.pipe(reload({
stream: true
}));
});
// gulp.task('taskName', only one other parameter with the function call part of gulp.series
gulp.task("browser-sync", gulp.series("sass", "js", function () {
browserSync.init({
server: {
baseDir: "./"
},
browser: ["google chrome"]
});
gulp.watch(srcs.html).on("change", reload);
// don't need gulp.series below if only calling a single task
// but if you wanted it: gulp.watch(srcs.sass, gulp.series("sass"));
// It does seem that sometimes the gulp.series is needed even though the docs
// specifically say you don't when calling only a single task
gulp.watch(srcs.sass, "sass");
gulp.watch(srcs.js, "js");
}));
// move below to the bottom, if using gulp.task cannot call a task before it has been registered,
// i.e., gulp.task("browser-sync"........
gulp.task("default", "browser-sync");
See a good migration to gulp4 article.
There are many more gulp4 benefits if you completely change your tasks to functions as mentioned in the article or the gulpJS docs, exporting etc. But what is above should get you towards working gulp4 code.
answered Jan 2 at 7:58
MarkMark
14.6k34060
add a comment |
// don't need "done" callback function since you "return" the stream
gulp.task("sass", function () {
// all your stuff unchanged here
});
// don't need "done" callback function since you "return" the stream
gulp.task("js", function () {
return gulp.src("./assets/js/sys.js")
.pipe(reload({
stream: true
}));
});
// gulp.task('taskName', only one other parameter with the function call part of gulp.series
gulp.task("browser-sync", gulp.series("sass", "js", function () {
browserSync.init({
server: {
baseDir: "./"
},
browser: ["google chrome"]
});
gulp.watch(srcs.html).on("change", reload);
// don't need gulp.series below if only calling a single task
// but if you wanted it: gulp.watch(srcs.sass, gulp.series("sass"));
// It does seem that sometimes the gulp.series is needed even though the docs
// specifically say you don't when calling only a single task
gulp.watch(srcs.sass, "sass");
gulp.watch(srcs.js, "js");
}));
// move below to the bottom, if using gulp.task cannot call a task before it has been registered,
// i.e., gulp.task("browser-sync"........
gulp.task("default", "browser-sync");
See a good migration to gulp4 article.
There are many more gulp4 benefits if you completely change your tasks to functions as mentioned in the article or the gulpJS docs, exporting etc. But what is above should get you towards working gulp4 code.
answered Jan 2 at 7:58
MarkMark
14.6k34060
add a comment |
// don't need "done" callback function since you "return" the stream
gulp.task("sass", function () {
// all your stuff unchanged here
});
// don't need "done" callback function since you "return" the stream
gulp.task("js", function () {
return gulp.src("./assets/js/sys.js")
.pipe(reload({
stream: true
}));
});
// gulp.task('taskName', only one other parameter with the function call part of gulp.series
gulp.task("browser-sync", gulp.series("sass", "js", function () {
browserSync.init({
server: {
baseDir: "./"
},
browser: ["google chrome"]
});
gulp.watch(srcs.html).on("change", reload);
// don't need gulp.series below if only calling a single task
// but if you wanted it: gulp.watch(srcs.sass, gulp.series("sass"));
// It does seem that sometimes the gulp.series is needed even though the docs
// specifically say you don't when calling only a single task
gulp.watch(srcs.sass, "sass");
gulp.watch(srcs.js, "js");
}));
// move below to the bottom, if using gulp.task cannot call a task before it has been registered,
// i.e., gulp.task("browser-sync"........
gulp.task("default", "browser-sync");
See a good migration to gulp4 article.
There are many more gulp4 benefits if you completely change your tasks to functions as mentioned in the article or the gulpJS docs, exporting etc. But what is above should get you towards working gulp4 code.
answered Jan 2 at 7:58
MarkMark
14.6k34060
// don't need "done" callback function since you "return" the stream
gulp.task("sass", function () {
// all your stuff unchanged here
});
// don't need "done" callback function since you "return" the stream
gulp.task("js", function () {
return gulp.src("./assets/js/sys.js")
.pipe(reload({
stream: true
}));
});
// gulp.task('taskName', only one other parameter with the function call part of gulp.series
gulp.task("browser-sync", gulp.series("sass", "js", function () {
browserSync.init({
server: {
baseDir: "./"
},
browser: ["google chrome"]
});
gulp.watch(srcs.html).on("change", reload);
// don't need gulp.series below if only calling a single task
// but if you wanted it: gulp.watch(srcs.sass, gulp.series("sass"));
// It does seem that sometimes the gulp.series is needed even though the docs
// specifically say you don't when calling only a single task
gulp.watch(srcs.sass, "sass");
gulp.watch(srcs.js, "js");
}));
// move below to the bottom, if using gulp.task cannot call a task before it has been registered,
// i.e., gulp.task("browser-sync"........
gulp.task("default", "browser-sync");
See a good migration to gulp4 article.
There are many more gulp4 benefits if you completely change your tasks to functions as mentioned in the article or the gulpJS docs, exporting etc. But what is above should get you towards working gulp4 code.
answered Jan 2 at 7:58
MarkMark
14.6k34060
edited Jan 2 at 16:58
answered Jan 2 at 7:58
MarkMark
14.6k34060
answered Jan 2 at 7:58
MarkMark
14.6k34060
answered Jan 2 at 7:58
MarkMark
14.6k34060
14.6k34060
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54002054%2fmodify-gulpfile-js-gulp-4-0%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
