Download to read offline
![❖ Local, test and
production
local: {
input:"www/index.html",
output:"www/index.html",
tokens: [{
token: "<environment/>",
string: fs.readFileSync(‘src/config/local.js').toString()
}]
},
test: {
input: "www/index.html",
output: "www/index.html",
tokens: [{
token: "<directives/>",
string: fs.readFileSync('src/config/test.js').toString()
}]
},
production: {
input: "www/index.html",
output: "www/index.html",
tokens: [{
token: "<directives/>",
string: fs.readFileSync(‘src/config/production.js').toString()
}]
}](https://image.slidesharecdn.com/devfesttr-141208083308-conversion-gate02/85/Web-Development-Making-it-the-right-way-8-320.jpg)
![An example of Grunt file
grunt.initConfig({
clean: {
before: ['www/img', 'www/css', 'www/compiled']
},
jade: {
compile: {
options: {
pretty: true,
data: {
debug: true
}
},
files: [{
cwd: "src",
src: "**/*.jade",
dest: "www",
expand: true,
ext: ".html"
}]
}
},
stylus: {
build: {
options: {
linenos: false,
compress: true
},
files: [{
expand: true,
cwd: 'src/css',
src: [ '**/*.styl' ],
dest: 'www/css',
ext: '.css'
}]
}
},
});](https://image.slidesharecdn.com/devfesttr-141208083308-conversion-gate02/85/Web-Development-Making-it-the-right-way-15-320.jpg)
Uploaded byYagiz Nizipli
Web Development: Making it the right way
This document discusses using Jade, Stylus, and NodeJS together with Grunt for web development. It describes Jade and Stylus as templating languages that compile to HTML and CSS, avoiding markup syntax. Grunt is presented as a task runner that can compile Jade and Stylus files via plugins. An example Gruntfile configuration is provided to demonstrate setting up Jade and Stylus compilation tasks.
More Related Content
Similar to Web Development: Making it the right way
![Java script nirvana in netbeans [con5679]](https://cdn.slidesharecdn.com/ss_thumbnails/javascriptnirvanainnetbeanscon5679-160927041807-thumbnail.jpg?width=640&height=640&fit=bounds)
Web Development: Making it the right way
- 1. Using Jade, Stylusand NodeJS Together with Grunt Web Development: Making it the right way Yagiz Nizipli Software Engineer
- 2. My Past Computerengineer, musician, geek. But what have I really been doing for the past 2 years?
- 3.
- 4. Open-Source Initiative ❖Always a fan of open-source projects. ❖ github.com/anonrig
- 5. Grunt - TheJavascript Task Runner ❖ Automation ❖ Minification, unit testing, linting ❖ Test-driven programming ❖ Step by step compilation
- 6. Using NodeJs withGrunt ❖ Node.Js is an event-driven, non-blocking i/o solution for asynchronous application development. ❖ On top of the language Javascript. ❖ An example use for Node.Js with Grunt is using file stream library in Node.Js. ❖ Require it using: var fs = require('fs');
- 7. An example pagefor our mobile application <head> <title>My Application</title> … some meta tags here … <stylesheets/> </head> <body> <script type=“text/javascript”> myEnvironmentVariable = {}; <environment/> </script> </body>
- 8. ❖ Local, testand production local: { input:"www/index.html", output:"www/index.html", tokens: [{ token: "<environment/>", string: fs.readFileSync(‘src/config/local.js').toString() }] }, test: { input: "www/index.html", output: "www/index.html", tokens: [{ token: "<directives/>", string: fs.readFileSync('src/config/test.js').toString() }] }, production: { input: "www/index.html", output: "www/index.html", tokens: [{ token: "<directives/>", string: fs.readFileSync(‘src/config/production.js').toString() }] }
- 9. Why we needa template engine? ❖ Don’t waste time on markup languages. ❖ Reuse the code whenever it’s possible. ❖ Indentation is the key point. ❖ Use if compilation is inevitable.
- 10. Introducing Jade ❖Jade, accessed from jade-lang.com, is a node template engine for HTML5 and JavaScript. ❖ Enables us to use HTML without the markup functionality. ❖ Compiles Jade code to HTML5 and JS. ❖ How?
- 11. An example Jadecode Jade
- 12. Introducing Stylus ❖Stylus, defined by the developers, is a expressive, robust, feature-rich CSS preprocessor. ❖ CSS without the unnecessary syntax. ❖ Enables to reuse the same CSS code for multiple rules. ❖ How?
- 13. Example Stylus code An everyday stylus use Using Stylus with setting variables body font 12px Helvetica, Arial, sans-serif a.button -webkit-border-radius 5px -moz-border-radius 5px border-radius 5px fonts = helvetica, arial, sans-serif body padding 50px font 14px/1.4 fonts
- 14. What now? ❖How to compile these engines without knowing? ❖ That’s why we need Grunt. ❖ Grunt offers grunt-contrib-stylus and grunt-contrib-jade tasks to compile both of these engines.
- 15. An example ofGrunt file grunt.initConfig({ clean: { before: ['www/img', 'www/css', 'www/compiled'] }, jade: { compile: { options: { pretty: true, data: { debug: true } }, files: [{ cwd: "src", src: "**/*.jade", dest: "www", expand: true, ext: ".html" }] } }, stylus: { build: { options: { linenos: false, compress: true }, files: [{ expand: true, cwd: 'src/css', src: [ '**/*.styl' ], dest: 'www/css', ext: '.css' }] } }, });
- 16. Sample project demo github.com/anonrig/gjs-example
- 17. Thank you forlistening. Any questions? Yagiz Nizipli yagiznizipli@me.com github.com/anonrig yagiz.nizipli.com