![]() ![]() You should learn Gulp whenever you feel like you are ready for it. At this time there's about 1200 plugins available for gulp. This makes Gulp a very small and lightweight utility that can be expanded with plugins so it does whatever you want. ![]() The way Gulp does all these things is through plugins. Some more advanced task include:Īnd many, many more. Concatenate javascript files into a single file.When you are developing a website some things you might want to automate are: Gulp is a task runner, it's purpose is to perform repetitive tasks for you. This article will focus on getting you started with Gulp. What is GulpĪfter dropping all these tools in the previous paragraphs you might be confused. The reason I chose Gulp over Grunt? I liked the syntax better and people said it was exponentially faster than Grunt. Personally I got started with Codekit and swapped that out for Gulp later on. ![]() So then there is the question, what do I use for that? Well, there's many options for that as well! Some prefer Grunt, others pick Gulp and some others turn to Codekit for this. CoffeeScript, LESS, SASS/SCSS, Jade, Slim, HAML, JS min/lint/concat, etc… I love this tool, the developer‘s release notes are hilarious □ and the latest update includes a “Codekit way” for handling html includes which is nice.And then any developer will reach that point where they want to actually compile their css, concatenate their javascript and minify them all. You can automates tones of task in tones of differents languages. CodeKit is a front-end powerfull toolīe also aware that there’s an awesome app for Mac users called CodeKit. The binary doesn’t have a watch option (like in Sass or Compass) but it’s possible to achieve this with Grunt or Make or what ever you want.Īs a side note be aware that Jade becomes really impressive when used with express.js (the NodeJS framework). The -P flag stands for “pretty”, for what I can see the compiled HTML gets out minified by default, and this flag renders it like regular HTML. How to compileĬompiling is achieved by the command line : jade -P *.jade -out. The -g flag means it will install Jade globally on you system. Ok but of course you’ll need to first install NodeJS + NPM and when you’re done just install Jade like this: sudo npm install -g jade Let’s say you have a home.jade file (which could be your default template) and you have another jade file which is navbar.jade then here’s how to include it into your home.jade file: doctype 5Ĭompile it to HTML and you’re done! How to install It works exactly the same as in PHP and this cool feature doesn’t seems to exists in HAML or in Slim (another template engine that compiles to HTML). The coolest thing in Jade (for me) is the possibility to handle includes. If you’re familiar to Sass or CoffeeScript, well Jade will be easy for you. Obviously it’s an easy way to write HTML, there’s less characters to type, indentation and spaces actually means something and at the end you need to compile it from Jade to HTML. You can play around with Jade’s interactive doc. Jade is a template engine build for NodeJS heavily inspired by HAML (the Ruby on Rails template engine). ![]() Github pages are awesome but it’s then impossible to use php includes in them… Basically it means you can have a static web page for your Github project for free. I’m a Git fan and I usually use Github as remote repository, it allows the creation of a gh-page branch. Being able to use inclusions in PHP makes it so much easier to maintain. As a front end developer I’m sometimes confront to projects where I need to deal with only static HTML files. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |