Gulp will then detect any changes and compile everything. In your workflow, you will edit the HTML, SCSS, and JS files. /dist - Gulp will output files here, don’t edit these files./app - working folder, you will edit SCSS/JS files in here.gulpfile.js - contains the config and runs all the Gulp tasks.
You should now have the project files set up, and all the npm packages installed that we’ll be using to run Gulp tasks. This will install the npm packages listed in the package.json file, particularly Gulp 4. Open the project, and in the root project folder, go to your command line and run npm install.Clone or download the Git repo of this project onto your computer.To set the front-end boilerplate project up:
(I also have plenty of code snippets in the rest of this tutorial, so you can just refer to those as well!) Once you have Gulp working, check out a demo project I built that uses Gulp! It’s a front-end boilerplate project that’s meant to be a quick way for me to get started with any simple front-end website.
Installing Gulp, using a working demo projectīefore you can run Gulp, you will need to install a couple of things: Let’s move on to installing and setting up Gulp on your computer. The great part about that is that once you have your gulpfile all set up, you can easily reuse it for other projects. So the way it works is, all your settings and tasks are stored in a gulpfile.js file.
Gulp is a tool that will run various tasks for you in your web development workflow. Run the gulp command to run all your tasks.Add your tasks to the gulpfile to compile your SCSS/JS files and run a watch task.Import your npm packages as modules in your gulpfile.Create a gulpfile.js file in your project root.Install other npm packages for your Gulp workflow.Install Gulp by running npm install gulp.Install the gulp-cli on your command line by running npm install gulp-cli -g.Need to just quickly get your Gulp 3 gulpfile.js working with Gulp 4? Click here to go right to that part of the post.
This tutorial will explain, step by step, how to set up Gulp 4 in your workflow, as well as how to migrate from Gulp 3 to Gulp 4 syntax.