👏 Thanks man! Just what I needed. Perfect crash course for gulp. I was able to modify for my folder structure and add a few more tasks after tinkering and referencing your video a few times.
Hi , i am trying to use gulp-imagemin but its showing error that we can't require this module and we should rather import it(after importing this particular module by using "type":"module" in my json file and import statement in gulpfile ,it is prompting me to convert all the require statements to import) , but as I have used require at several places in my project it is very difficult to import each and every module and path, can you tell some method that we can do to import imagemin rather than importing it?
Hey, Can you tell me if I can minify my internal css(present in tag ) and internal js(present in tag ) into minfied file? If can can you share any steps on the same. Thanks in advance.
Hey mate, I think this guide is perfect for me, do you have a tutorial on how to deploy it in Netlify and make it live. I tried to deploy the files you have here but I can't make it work at all. Please advise hopefully add some browserSync too if possible
Hey man. Really awesome tutorial! I support! But you know there will always be some "but". I'm not some expert so don't mind if I say something stupid, so here it is: What if I want to have multiple .js files like modules but not modules, no type="modules" in html, and I want before my .html run the main script, for example "script.js", that app.js and ui.js go trough concatenation and terser and that output of those two be that main "script.js" and to be placed in src/js folder? Here comes the biggest issue that I don't get: That function that you have writen works fine, all good. But how should I write a function in Gulp, so that I use multiple .js failes just like modules type but that .html loads only main script.js that is located .pipe(gulp.dest('src/css')) in src folder along other all .js files. So that I can run later some build function task and copy all files I want into my dist folder. I want that while I work just like in scss/css that files are updated automaticly on a change/save thing everything is done into that one main .js file that my html loads. Is it possible, or my imagination is way off limit? :D Thanks
if you saw an error of cssTasks then please install separately postcss because the the one with the gulp-postcss doesn't work. npm install postcss --save-dev
Really nice video, thanks. After 3-4 gulp tutorials couple of months ago, I gave up learning it because I didn't have a need to and found it really confusing. Now I needed and after watching this, you made me realize how this thing and it's config work. Could you also teach us Webpack and it's config with the explanation of this quality? :D Would be really nice.
And when I tried to run the gulp jsTask, got the following error. Any ideas how this happened? Error: Cannot find module '/Volumes/DATA/Automation/project/node_modules/d/index.js'. Please verify that the package.json has a valid "main" entry at tryPackage (internal/modules/cjs/loader.js:329:19) at Function.Module._findPath (internal/modules/cjs/loader.js:690:18) at Function.Module._resolveFilename (internal/modules/cjs/loader.js:1017:27) at Function.Module._load (internal/modules/cjs/loader.js:899:27) at Module.require (internal/modules/cjs/loader.js:1090:19) at require (internal/modules/cjs/helpers.js:75:18) at Object. (/Volumes/DATA/Automation/project/node_modules/memoizee/lib/configure-map.js:7:24) at Module._compile (internal/modules/cjs/loader.js:1201:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:1221:10) at Module.load (internal/modules/cjs/loader.js:1050:32) { code: 'MODULE_NOT_FOUND', path: '/Volumes/DATA/Automation/project/node_modules/d/package.json', requestPath: 'd' }
@@SamFromaway haha, so true, love the videos you've been putting up on youtube. please stays safe during the pandemic. warmest regards from jakarta, indonesia.
I did not find anything in the documentation, let me know if you found a solution. But for other reasons too it's probably best to have all your CSS in one folder. What you can do if there is no quick solution is just have more than one CSS task for the different locations.
@@SamFromaway hi in the end i pushed everthing into an array see code below was just that some parts differ tryed it with complete diffrent locations that also works but often causes a stack overflow const { src, series, dest, watch, } = require('gulp'); const sass = require("gulp-sass") const { init, reload, stream } = require("browser-sync"); const paths = ["./Content/styles/login.scss", "./Content/styles/main.scss", "./Content/styles/external/*.scss", "./Content/styles/impressum.scss", "./Content/styles/shared/**/*.scss", "./Content/styles/shared/*.scss", "./Areas/**/Content/styles/*.scss", ]; function sassCompile() { return src(paths, { base: "./" }) .pipe(sass()) .pipe(dest(".")) .pipe(stream()); } function watchTask() { init({ server: { baseDir: "./", }, }); watch(paths, sassCompile).on("change", reload); } exports.sassCompile = sassCompile; exports.watchTask = watchTask; exports.default = series(sassCompile, watch);
gulp wait for return to signal completion of the task async function and there're many ways for this ... read gulpjs.com/docs/en/getting-started/async-completion but simply you can add "async" before your task function for now .
hey Dev world iam a joiner web dev and im completely lost on what should i learn for tasks weither gulp or webpack if you can make a video on what should learn like a road map for new developers
Hey Mano, I just published the Parcel js video. ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-Gvp13b6rahc.html Soon I'll have a video with my workflow.
Good question. They are similar but webpack is surely more advanced than Gulp, whereas Gulp is easier to configure. Wepack also has a bigger ecosystem with plugins etc. For simple tasks I would use Gulp, for bigger tasks either configure webpack, but usually if you have to configure webpack there is probably a template out there for your use-case like create-react-app etc
Thanks. I have a video on Netlefy here ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-D-bVzFQ_mUI.html. Just put in your build command in the option build & deploy or while setting up the site.
@@guilhermegirardi Yes I usually set it up like that, so if you have changes you don't have to rebuild it manually but you can just push the changes to github and netlify will automatically rebuild the site with gulp
I got this error PostCSS plugin autoprefixer requires PostCSS 8. Migration guide for end-users: github.com/postcss/postcss/wiki/PostCSS-8-for-end-users tried many things and nothing works!!!!!!!!
