Unlike Grunt, Gulp's syntax is really easy to pick up. The gulpfile.js is your Gulp configuration. You might have noticed the gulpfile.js, this is where all the magic happens. It would look something like this: node_modules/įor the sake of this introduction I have added the dist folder + structure already. To keep our root directory clean I like to place the src and dist folder in a /public folder. If you're not able to delete your dist folder and rebuild it with Gulp, you're doing something wrong! The dist folder will be completely built up by Gulp. The src folder will contain all your source files such as plain JavaScript, uncompressed (s)css and unoptimised images. npm install gulp-save-devīefore we continue you need to have a src (source) and dist (distribution) folder. To install Gulp plugins you use the same syntax. The -save-dev flag adds the installed dependency as a devDependency, because you'll only use them when developing your application. Next we need to install Gulp and some dependencies into our project. Skip this if you have Gulp installed on your system already of course (note: on your system != in your project folder) If you don't have Gulp installed globally yet I advise you to do so using: npm install gulp -g When you've created a package.json it's time to install Gulp and some dependencies. Just press enter if you don't know what to fill in or even better: check the documentation. This will prompt you with some questions for creating a package.json. You'll have to do this only once per project. Once you've fired up your terminal and you're in your project folder it's time to create a package.json. To install Gulp you will need Node, installing Node is not within the scope of this article so I'll assume you will have it installed already. Don't do that manually, write a Gulp task and run it whenever you need to! Setting up Gulp When you build your project to production, you probably want to minify your JavaScript, compile your Sass and check for errors in your code. Gulp does this really well and is also quite extensible with plugins (980 at this time of writing). If you don't know what streams are let me rephrase their slogan for you.Ī build system builds your project into different builds (ie: development, production, testing). That means it's a build system that takes advantage of Node's stream capabilities. Gulp describes itself as a streaming build system. Unfortunately there are still loads of developers who minify their JavaScript & CSS using online tools and refresh their browser manually once they save a file. We try to automate everything so there's little repetitive work left to do. Being productive is something that us developers value a lot.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |