Create Your Own Static Site Generator with Grunt (Alex Newman)
•
3 gefällt mir•1,185 views
Taken from Future of Web Design (#FOWD), London 2015 Conference. http://futureofwebdesign.com/london-2015 Are you tired of learning how to use other people’s content management systems? Do you get frustrated with slow databases and even slower site deployments? Does the thought of knowing how to properly vendor prefix your CSS make you a sad panda? Let’s talk Grunt, folks! Grunt is a super easy-to-configure task automator written in JavaScript. In this talk you will learn how to set up a Grunt project that will compile CSS from your favourite pre-processor, automatically add vendor-prefixes, create source maps to go along with it, compress your PNG files, concatenate and minify your JavaScript, compile a simple HTML template language called Jade using JSON data and Markdown files to easily generate static content, and automatically deploy your site to a remote server all in one fell swoop! Alex will guide you through a step-by-step process that will save you a ton of time and effort and revolutionise your front-end development workflow.
Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Mehr von Future Insights
Mehr von Future Insights (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Create Your Own Static Site Generator with Grunt (Alex Newman)
- 1. CREATE YOUR OWN STATIC SITE GENERATOR WITH GRUNT Future of Web Design London 2015 http://internets.io/grunt- slide-deck
- 2. ABOUT ME Co-owner of Copter Labs I have 2 cats I work with awesome clients, startups, and agencies to help them build really cool stuff.
- 9. SETTING UP YOUR GRUNT PROJECT Make sure you have npmset up, the Node.js package manager. Create a new project folder and type the following: $echo"{}">package.json $npminstall-ggrunt--save-dev $touchGruntfile.js Open up Gruntfile.jsand write: module.exports=function(grunt){ //Projectconfiguration. grunt.initConfig({ }); };
- 10. SIMPLE GRUNT HTTP SERVER $npminstallgrunt-contrib-watch--save-dev $npminstallgrunt-contrib-connect--save-dev $echo'HelloWorld!'>index.html In Gruntfile.js, edit the grunt.initConfig()function and add the following: grunt.initConfig({ connect:{ server:{ options:{ open:true, livereload:true } } }, watch:{ } });
- 11. SIMPLE GRUNT HTTP SERVER (CONT'D) Now, towards the bottom of Gruntfile.js but before the closing };add: //Thesepluginsprovidenecessarytasks. grunt.loadNpmTasks('grunt-contrib-watch'); grunt.loadNpmTasks('grunt-contrib-connect'); grunt.registerTask('serve',['connect','watch']); //DefaultTask grunt.registerTask('default','serve'); You can now type gruntin your terminal, and a browser window will pop up and go to the url http://0.0.0.0:8000. Theserveronlyrunsaslongasgruntisrunning,thereforewerunthewatchtask tonotonlywatchforfilechanges,butalsotokeeptheserveralive.
- 12. CONCATENATE AND MINIFY JAVASCRIPT Type the following into your terminal at your project's root: $npminstallgrunt-contrib-uglify--save-dev Add the following to the bottom of your Gruntfile.jswhere you have your grunt.loadNpmTasksfunctions listed: grunt.loadNpmTasks('grunt-contrib-uglify');
- 13. CONCATENATE AND MINIFY JAVASCRIPT (CONT'D) In the grunt.initConfigfunction, in between the last line of the connectconfiguration, and the first line of the watch configuration: uglify:{ js:{ files:{ 'assets/js/main.min.js':'assets/js/main.js' } } }, Warning: Be aware of your commas!
- 14. COMPILE CSS FROM A PRE-PROCESSOR In your terminal in the project's root, type: $npminstallgrunt-contrib-less--save-dev Add the following to the bottom of your Gruntfile.jswhere you have your grunt.loadNpmTasksfunctions listed: $grunt.loadNpmTasks('grunt-contrib-less');
- 15. COMPILE CSS FROM A PRE-PROCESSOR (CONT'D) Add this to the grunt.initConfigfunction, in between the last line of the uglifyconfiguration, and the first line of the watchconfiguration: less:{ style:{ files:{ 'assets/css/main.min.css':'assets/less/main.less' } } },
- 16. AUTOPREFIXR In your terminal in the project's root, type: $npminstallgrunt-autoprefixer--save-dev Add the following to the bottom of your Gruntfile.jswhere you have your grunt.loadNpmTasksfunctions listed: $grunt.loadNpmTasks('grunt-autoprefixer');
- 17. AUTOPREFIXR (CONT'D) Add this to the grunt.initConfigfunction, in between the last line of the lessconfiguration, and the first line of the watch configuration: autoprefixer:{ main:{ src:'assets/css/main.min.css', }, },
- 18. SETTING UP THE WATCH TASK Add the following code inside your watchconfiguration: watch:{ js:{ files:['assets/js/*.js'], tasks:['uglify:js'], options:{ livereload:true, } }, css:{ files:['assets/less/*.less'], tasks:['less:style','autoprefixer:main'], options:{ livereload:true, } }, } InorderforLivereloadtowork,youhavetoinstalltheLivereload( )browserplugin.http://livereload.com/
- 19. USING JADE TEMPLATES WITH JSON DATA In your terminal in the project's root, type: $npminstallgrunt-contrib-jade--save-dev Add the following to the bottom of your Gruntfile.jswhere you have your grunt.loadNpmTasksfunctions listed: $grunt.loadNpmTasks('grunt-contrib-jade');
- 22. USING MARKDOWN FILES FOR SITE CONTENT In your terminal in the project's root, type: $npminstallgrunt-markdown--save-dev Add the following to the bottom of your Gruntfile.jswhere you have your grunt.loadNpmTasksfunctions listed: $grunt.loadNpmTasks('grunt-markdown');
- 37. RECAP 1. If you're not automating your development process, you're going to have a bad time. 2. It's real easy to automate things with Grunt. 3. Web designers are people too, with real problems and real feelings. Let Grunt help you find your happy place.