#Gulp watch new files install#

The -save-dev flag will automatically add the development dependencies in the package.json file so that next time you can install everything by only running npm install. This command will install both BrowserSync and Gulp as development dependencies. Npm install browser-sync gulp gulp-sass -save-dev Secondly you will need to install the following dependencies using NPM: After you have finished the process a new package.json file will be created. Most of the details are optional and you can just “enter your way through”. You will be asked to give the project a name, description and so on. Step 1: Install Gulp, BrowserSync and Bootstrap as dependencies with NPMįirst of all you will need to create a package.json file by running the following command: This is how the file structure will look like as you follow the instructions. If you have Node installed you can run the following command in your terminal to install the Gulp CLI: Gulp - after you have Node successfully installed, make sure you also install Gulp’s CLI (command line utility interface).Node - make sure you have Node.js installed and that it is accessible via the terminal.Now that you have a better understanding of each of these technologies we can start setting them all up so that you can start building your future projects much faster and better. It will do it for you as soon as you save a file in your project folder. Shortly put, you won’t have to refresh the page every time you change something in your code. BrowserSyncīrowserSync is a powerful tool that you can use with Gulp or Grunt to improve your development workflow with time-saving synchronised browser testing. It is highly recommended as it will save you a lot of time and effort down the road. Using Sass you can make us of variables, mixins (functions) and better organize your style sheets structure overall. Sass is a style sheet language released almost 13 years ago which is sort of an extension for regular CSS capabilities. It can be used to save time and effort by using predefined web components such as buttons, cards, navigation bars and powerful utility classes to create responsive layouts. It is an open source project originally developed by Mark Otto and Jacob Thornton almost a decade ago. Bootstrap CSSīootstrap is the most popular CSS Framework currently used by at least 7.9 million live websites according to the Bootstrap CDN statistics. Gulp can be used to automate certain tasks such as compiling Sass into CSS, minify code, optimize images, unit testing and many more. Gulp JS is an open source Javascript toolkit developed by Eric Schoffstall which is being used by millions of developers to use as a streaming build system for front-end web projects. In this tutorial I would like to explain what each of these tools are and how they can improve your workflow when building awesome websites. Sometimes it can be a bit difficult to really understand the whole process. If you’re rather new to web development you might have heard about Sass and toolkits such as Gulp/Grunt that can improve both your workflow and the modularity of your stylesheets.

Gulp watch new files