Grunt pour ceux qui pensent que Grunt est compliqué On parle beaucoup de Grunt aujourd'hui, mais les articles disponibles sont souvent abscons et techniques. Pourtant Grunt n'est pas réservé aux spécialistes, comme le montre cette introduction de Chris Coyier. Par Chris Coyier On donne souvent les conseils suivants aux intégrateurs web : Divisez votre CSS et votre JavaScript en autant de parties que nécessaire, puis concaténez-les pour la version de production de votre site. Il y en aurait encore beaucoup à ajouter, mais voilà déjà quelques basiques. Je suis sûr que vous avez entendu parler de Grunt. Mais soyons clair : Grunt est un de ces nouveaux joujoux à la mode que tous les cool kids utilisent, mais qui à première vue semble étrange et intimidant. Écartons tout de suite quelques malentendus Peut-être avez-vous entendu parler de Grunt mais ne l'avez pas utilisé vous-même. Je n'ai pas besoin de ce que fait Grunt Probablement que si, en fait. Grunt fonctionne avec la console - Je ne suis qu'un designer Je suis designer, moi aussi. grunt
Ronan Levesque - Automatiser son workflow avec Grunt Grunt est un task runner dont le but est d’automatiser certaines tâches répétitives (compilation, minification etc). Il est écrit en JavaScript et fonctionne avec Node.js. Dans cet article j’expliquerai comment le configurer et le lancer de manière basique. Un outil extrêmement puissant Le gros avantage de Grunt est donc son automatisation. Minifier et concaténer des fichiers JSTester les fichiers JS avec JSHintOptimiser des imagesCompiler et optimiser des fichiers SassNettoyer des sprites inutilesetc. Ceci n’est qu’un petit aperçu, sachant qu’il existe des centaines de tâches différentes. Installation Avant toute chose, il vous faudra installer Node.js et NPM sur votre ordinateur. Ensuite, il va falloir installer l’interface de commande de Grunt. npm install -g grunt-cli Cela va permettre de lancer Grunt de n’importe où sur votre système. Configuration Grunt a besoin de deux fichiers pour fonctionner : package.json et Gruntfile.js. package.json npm install <nom-du-plugin> --save-dev Sass JSHint
Sass: Sass Basics Before you can use Sass, you need to set it up on your project. If you want to just browse here, go ahead, but we recommend you go install Sass first. Go here if you want to learn how to get everything set up. PreprocessingPreprocessing permalink CSS on its own can be fun, but stylesheets are getting larger, more complex, and harder to maintain. Once you start tinkering with Sass, it will take your preprocessed Sass file and save it as a normal CSS file that you can use in your website. The most direct way to make this happen is in your terminal. You can also watch individual files or directories with the --watch flag. sass --watch input.scss output.css You can watch and output to directories by using folder paths as your input and output, and separating them with a colon. sass --watch app/sass:public/stylesheets Sass would watch all files in the app/sass folder for changes, and compile CSS to the public/stylesheets folder. 💡 Fun fact: Sass has two syntaxes! VariablesVariables permalink
Grunt for People Who Think Things Like Grunt are Weird and Hard Front-end developers are often told to do certain things: Work in as small chunks of CSS and JavaScript as makes sense to you, then concatenate them together for the production website. Compress your CSS and minify your JavaScript to make their file sizes as small as possible for your production website. Optimize your images to reduce their file size without affecting quality. That’s not a comprehensive list of course, but those are the kind of things we need to do. I bet you’ve heard of Grunt. But let’s face it: Grunt is one of those fancy newfangled things that all the cool kids seem to be using but at first glance feels strange and intimidating. Let’s nip some misconceptions in the bud right away Perhaps you’ve heard of Grunt, but haven’t done anything with it. I don’t need the things Grunt does You probably do, actually. Grunt runs on Node.js — I don’t know Node You don’t have to know Node. I have other ways to do the things Grunt could do for me I’m a designer too. OK. npm install grunt
Kickstart Your AngularJS Development with Yeoman, Grunt and Bower Whether you love or hate it, there’s no denying that AngularJS is the framework on every developer’s lips. It may not be for everybody, but AngularJS has a quirky, efficient and powerful feature set. Couple that with a few useful development tools like Yeoman, Grunt and Bower and you’ve got yourself an incredibly fast rapid prototyping process. What we’ll cover This AngularJS tutorial will cover: Generating a bare bones AngularJS app with YeomanUsing Grunt to speed up development and help perform repetitive tasksUsing Bower to add third party plugins/frameworksMaking minor changes to your AngularJS app Prerequisites To get the most out of this tutorial we recommend you have the following skills and resources available: A terminal and basic knowledge of the command lineNodeJS and NPM installedFundamental JS, CSS and HTML knowledge Files You can find a repo of this tutorial project here. Let’s get started yo! Alright, let’s get this thing underway. npm install -g yo grunt-cli bower Yeoman yo angular
Getting started Grunt and Grunt plugins are installed and managed via npm, the Node.js package manager. Grunt 0.4.x requires stable Node.js versions >= 0.8.0. Before setting up Grunt ensure that your npm is up-to-date by running npm update -g npm (this might require sudo on certain systems). If you already have installed Grunt and are now searching for some quick reference, please checkout our Gruntfile example and how to configure a task. Installing the CLI Using Grunt 0.3? In order to get started, you'll want to install Grunt's command line interface (CLI) globally. npm install -g grunt-cli This will put the grunt command in your system path, allowing it to be run from any directory. Note that installing grunt-cli does not install the Grunt task runner! How the CLI works Each time grunt is run, it looks for a locally installed Grunt using node's require() system. Working with an existing Grunt project Change to the project's root directory.Install project dependencies with npm install.Run Grunt with grunt.
Build a real-time polls application with Node.js, Express, AngularJS, and MongoDB Recently while lecturing on HTML5 to a large group of students, I wanted to poll them and display their voting results, updating in real-time. I decided to quickly build a polling app for this purpose. I wanted a simple architecture and not too many different languages and frameworks. “This MEAN stack (Mongo, Express, Angular, Node) may one day surpass the simplicity of the LAMP stack (Linux, Apache, MySQL, PHP) for web application development and deployment.” I chose to use DevOps Services (formerly JazzHub) to manage the source code for my project. What you'll need to build your app A basic familiarity with Node.js, and a Node.js development environmentThese Node.js modules: Express framework, Jade, Mongoose, and socket.ioAngularJS JavaScript frameworkMongoDB NoSQL databaseThe Eclipse IDE, with the Nodeclipse plug-in installed READ:Node.js — beyond the basics Step 1. In Eclipse, switch to the Node perspective, and create a new Node Express project. Figure 1. Configure the basic front-end
Dynamisez vos sites web avec JavaScript ! Bienvenue à toutes et à tous, Qui n'a jamais entendu parler du JavaScript ? Créé dans les années 90 en tant que simple langage de script, JavaScript est désormais un des poids lourds du développement Web ! Qui plus est, il se démocratise au sein d'autres environnements comme les serveurs avec le célèbre Node.js, les applications pour smartphones et tablettes, avec PhoneGap d'Adobe, les applications pour Windows 8, mais aussi les logiciels multiplateformes. Bref, JavaScript est partout ! Voici quelques exemples de ce qui est réalisable grâce au JavaScript : Sur ce, bonne lecture ! Installing Node.js via package manager | Node.js Note: The packages on this page are maintained and supported by their respective packagers, not the Node.js core team. Please report any issues you encounter to the package maintainer. If it turns out your issue is a bug in Node.js itself, the maintainer will report the issue upstream. Node.js and npm packages are available in the Community Repository. pacman -S nodejs npm Debian and Ubuntu based Linux distributions Also including: Linux Mint, Linux Mint Debian Edition (LMDE), elementaryOS and others. Node.js is available from the NodeSource Debian and Ubuntu binary distributions repository (formerly Chris Lea's Launchpad PPA). NOTE: If you are using Ubuntu Precise or Debian Wheezy, you might want to read about running Node.js >= 4.x on older distros. curl -sL | sudo -E bash - sudo apt-get install -y nodejs Alternatively, for Node.js v6: curl -sL | sudo -E bash - sudo apt-get install -y nodejs Available architectures:
Setup an Eclipse Run External Tool Configuration for Grunt | .:paul.tavares:. I use Eclipse along with the Aptana plugin to develop web applications and have been for a long time. I started using Eclipse because I loved the fact that it provides a full feature Integrated Development Environment (IDE) framework that, through the use of plugins, supports multiple programing languages. At the time I started using it I wanted to learn one IDE that would fulfill developing in multiple languages. To that extent, Eclipse has lived up to it. I have used it to develop Java, Perl, Javascript, CSS, HTML, BrightScript (for my Roku) and will, very soon, use it to develop with Rails. I have tried other editors, like Sublime Text and Brackets, but keep coming back to Eclipse, mostly for the convenience that it already “has it all” and the fact that I’m comfortable using it. In a web project that I started a few months ago, I wanted to learn how to use Grunt, since it seems like it is now the standard javascript build tool. Setup a Run External Tool Configuration for Grunt