This is a boilerplate for a Gulp files If you are lazy like me and are always on the watch out of how you can optimize your workflow as a web developer this is the right video for you. Today we are going to learn what Gulp is and how you can use it to avoid boring repetitive steps especially in regards to deploying a html css javascript website.
Before we start, around two years ago gulp updated from version 3 to version 4. If you see code on stack overflow or somewhere else on the internet like this, where there is no function statement in the beginning. This is the old syntax which most probably is not going to work with Gulp 4.
So either install gulp 3 or learn here how it’s done with gulp version 4. So what is Gulp, Gulp says: gulp is a toolkit for automating painful or time-consuming tasks in your development workflow, so you can stop messing around and build something.
It’s also called toolkit or task runner A couple of practical examples can be, with gulp you can automate image optimization, copy files, rename files, uglify CSS or concatinate Javascript files with just a command in the terminal.
Alternative To Gulp, even if not directly, are Grunt, Webpack or direct npm scripts.
Here the steps:
- npm init
- Install Gulp Globally
- CD in the project folder
- Install Gulp as dev dependency
- Create Gulpfile.js
- Import gulp and deconstruct variables.
- Let's go...
Plugins: npm install --save-dev gulp gulp-sass gulp-sourcemaps gulp-postcss autoprefixer cssnano gulp-concat gulp-terser gulp-imagemin
Resources: https://gulpjs.com/docs/en/getting-started/quick-start https://postcss.org/