Skip to content

Instantly share code, notes, and snippets.

@justinleoye

justinleoye/jade.md

Forked from passy/jade.md
Last active August 29, 2015 14:06
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save justinleoye/10c1ce3d7f9fc90f0d58 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save justinleoye/10c1ce3d7f9fc90f0d58 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @passy passy revised this gist Mar 23, 2013. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions jade.md
    View file
    Original file line number Diff line number Diff line change
    @@ -45,7 +45,7 @@ on change. It should look something like this:
    ```js
    watch: {
    jade: {
    files: ['<% yeoman.app %>/{,*/}*.jade'],
    files: ['<%= yeoman.app %>/{,*/}*.jade'],
    tasks: ['jade']
    },
    livereload: {
    @@ -69,7 +69,7 @@ htmlmin: {
    files: [{
    expand: true,
    cwd: '.tmp',
    src: '*.html',
    src: '{,*/}*.html',
    dest: '<%= yeoman.dist %>'
    }]
    }
  2. @passy passy revised this gist Mar 23, 2013. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions jade.md
    View file
    Original file line number Diff line number Diff line change
    @@ -45,12 +45,12 @@ on change. It should look something like this:
    ```js
    watch: {
    jade: {
    files: ['<% yeoman.app %>/*.jade'],
    files: ['<% yeoman.app %>/{,*/}*.jade'],
    tasks: ['jade']
    },
    livereload: {
    files: [
    '.tmp/*.html',
    '.tmp/{,*/}*.html',
    '{.tmp,<%%= yeoman.app %>}/styles/{,*/}*.css',
    '{.tmp,<%%= yeoman.app %>}/scripts/{,*/}*.js',
    '<%%= yeoman.app %>/images/{,*/}*.{png,jpg,jpeg,gif,webp}'
  3. @kevva kevva revised this gist Mar 20, 2013. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion jade.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,4 @@
    # How to use Jade with Yeoman
    # Using Yeoman and Jade

    ## Getting started

  4. @kevva kevva revised this gist Mar 20, 2013. 1 changed file with 4 additions and 4 deletions.
    8 changes: 4 additions & 4 deletions jade.md
    View file
    Original file line number Diff line number Diff line change
    @@ -39,8 +39,8 @@ folder and compile them into the `.tmp` folder. Since `watch:livereload`,
    we have to change them. To do that, simply replace the references pointing to
    `<% yeoman.app %>/*.html` to `.tmp/*.html`.

    We also have to add Jade to the watch
    task so that your Jade templates compiles on change. It should look something like this:
    We also have to add Jade to the watch task so that our Jade templates compiles
    on change. It should look something like this:

    ```js
    watch: {
    @@ -76,7 +76,7 @@ htmlmin: {
    }
    ```

    Finally, change your `server` and `build` tasks to include the `jade` task.
    Finally, change the `server` and `build` tasks to include the `jade` task.

    ```js
    grunt.registerTask('server', function (target) {
    @@ -112,7 +112,7 @@ grunt.registerTask('build', [
    ]);
    ```

    Replace the `index.html` in your `app/` folder with an `index.jade`. You can convert
    Replace the `index.html` in the `app/` folder with an `index.jade`. You can convert
    the default `index.html` to `.jade` on [html2jade.com](http://html2jade.com/).
    Then try running `grunt server` and you should be served a page with a 'Allo 'allo
    message.
  5. @kevva kevva revised this gist Mar 20, 2013. 1 changed file with 3 additions and 1 deletion.
    4 changes: 3 additions & 1 deletion jade.md
    View file
    Original file line number Diff line number Diff line change
    @@ -37,7 +37,9 @@ The above example tells Jade to look for `.jade` files in the `<%= yeoman.app %>
    folder and compile them into the `.tmp` folder. Since `watch:livereload`,
    `useminPrepare` and `htmlmin` are looking for your HTML files in `<%= yeoman.app %>`
    we have to change them. To do that, simply replace the references pointing to
    `<% yeoman.app %>/*.html` to `.tmp/*.html`. We also have to add Jade to the watch
    `<% yeoman.app %>/*.html` to `.tmp/*.html`.

    We also have to add Jade to the watch
    task so that your Jade templates compiles on change. It should look something like this:

    ```js
  6. @kevva kevva revised this gist Mar 20, 2013. 1 changed file with 3 additions and 3 deletions.
    6 changes: 3 additions & 3 deletions jade.md
    View file
    Original file line number Diff line number Diff line change
    @@ -36,9 +36,9 @@ jade: {
    The above example tells Jade to look for `.jade` files in the `<%= yeoman.app %>`
    folder and compile them into the `.tmp` folder. Since `watch:livereload`,
    `useminPrepare` and `htmlmin` are looking for your HTML files in `<%= yeoman.app %>`
    we have to change them. Simply replace the references pointing to `<% yeoman.app %>/*.html`
    to `.tmp/*.html`. We also have to add Jade to the watch task so that your Jade
    templates compiles while running `grunt server`. It should look something like this:
    we have to change them. To do that, simply replace the references pointing to
    `<% yeoman.app %>/*.html` to `.tmp/*.html`. We also have to add Jade to the watch
    task so that your Jade templates compiles on change. It should look something like this:

    ```js
    watch: {
  7. @kevva kevva revised this gist Mar 20, 2013. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion jade.md
    View file
    Original file line number Diff line number Diff line change
    @@ -72,7 +72,7 @@ htmlmin: {
    }]
    }
    }
    ``
    ```

    Finally, change your `server` and `build` tasks to include the `jade` task.

  8. @kevva kevva revised this gist Mar 20, 2013. 4 changed files with 116 additions and 449 deletions.
    68 changes: 0 additions & 68 deletions 00-readme.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,68 +0,0 @@
    # How to use Jade with Yeoman

    ## Getting started

    * Make sure you have [yo](https://github.com/yeoman/yo) installed: `npm install -g yo`
    * Run: `yo webapp`
    * Install [grunt-contrib-jade](https://github.com/gruntjs/grunt-contrib-jade): `npm install grunt-contrib-jade --save-dev`

    ## Customization

    First of all, we have to setup our jade task. You can find documentation for the task [here](https://github.com/gruntjs/grunt-contrib-jade).

    ```js
    jade: {
    dist: {
    options: {
    pretty: true
    },
    files: [{
    expand: true,
    cwd: '<%= yeoman.app %>',
    dest: '.tmp',
    src: '*.jade',
    ext: '.html'
    }]
    }
    }
    ```

    Then we have to change the paths where `watch:livereload`, `useminPrepare`, and `htmlmin` are looking for `*.html` files. Basically change the references pointing to `<% yeoman.app %>/*.html` to `.tmp/*.html`. See the example Gruntfile.js below for a working example.

    Finally, change your `server` and `build` tasks to include the jade task.

    ```js
    grunt.registerTask('server', function (target) {
    if (target === 'dist') {
    return grunt.task.run(['build', 'open', 'connect:dist:keepalive']);
    }

    grunt.task.run([
    'clean:server',
    'coffee:dist',
    'compass:server',
    'jade',
    'livereload-start',
    'connect:livereload',
    'open',
    'watch'
    ]);
    });

    grunt.registerTask('build', [
    'clean:dist',
    'coffee',
    'compass:dist',
    'jade',
    'useminPrepare',
    'imagemin',
    'htmlmin',
    'concat',
    'cssmin',
    'uglify',
    'copy',
    'usemin'
    ]);
    ```

    Replace the `index.html` in your `app/` folder with the `index.jade` included below and try running `grunt server`. If everything works correctly you should see a "'Allo 'allo" message.
    307 changes: 0 additions & 307 deletions 01-gruntfile.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,307 +0,0 @@
    // Generated on 2013-03-20 using generator-webapp 0.1.5
    'use strict';
    var lrSnippet = require('grunt-contrib-livereload/lib/utils').livereloadSnippet;
    var mountFolder = function (connect, dir) {
    return connect.static(require('path').resolve(dir));
    };

    // # Globbing
    // for performance reasons we're only matching one level down:
    // 'test/spec/{,*/}*.js'
    // use this if you want to match all subfolders:
    // 'test/spec/**/*.js'

    module.exports = function (grunt) {
    // load all grunt tasks
    require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);

    // configurable paths
    var yeomanConfig = {
    app: 'app',
    dist: 'dist'
    };

    grunt.initConfig({
    yeoman: yeomanConfig,
    watch: {
    coffee: {
    files: ['<%= yeoman.app %>/scripts/{,*/}*.coffee'],
    tasks: ['coffee:dist']
    },
    coffeeTest: {
    files: ['test/spec/{,*/}*.coffee'],
    tasks: ['coffee:test']
    },
    compass: {
    files: ['<%= yeoman.app %>/styles/{,*/}*.{scss,sass}'],
    tasks: ['compass']
    },
    jade: {
    files: ['<% yeoman.app %>/*.jade'],
    tasks: ['jade']
    },
    livereload: {
    files: [
    '.tmp/*.html',
    '{.tmp,<%= yeoman.app %>}/styles/{,*/}*.css',
    '{.tmp,<%= yeoman.app %>}/scripts/{,*/}*.js',
    '<%= yeoman.app %>/images/{,*/}*.{png,jpg,jpeg,webp}'
    ],
    tasks: ['livereload']
    }
    },
    connect: {
    options: {
    port: 9000,
    // change this to '0.0.0.0' to access the server from outside
    hostname: 'localhost'
    },
    livereload: {
    options: {
    middleware: function (connect) {
    return [
    lrSnippet,
    mountFolder(connect, '.tmp'),
    mountFolder(connect, 'app')
    ];
    }
    }
    },
    test: {
    options: {
    middleware: function (connect) {
    return [
    mountFolder(connect, '.tmp'),
    mountFolder(connect, 'test')
    ];
    }
    }
    },
    dist: {
    options: {
    middleware: function (connect) {
    return [
    mountFolder(connect, 'dist')
    ];
    }
    }
    }
    },
    open: {
    server: {
    path: 'http://localhost:<%= connect.options.port %>'
    }
    },
    clean: {
    dist: ['.tmp', '<%= yeoman.dist %>/*'],
    server: '.tmp'
    },
    jshint: {
    options: {
    jshintrc: '.jshintrc'
    },
    all: [
    'Gruntfile.js',
    '<%= yeoman.app %>/scripts/{,*/}*.js',
    '!<%= yeoman.app %>/scripts/vendor/*',
    'test/spec/{,*/}*.js'
    ]
    },
    mocha: {
    all: {
    options: {
    run: true,
    urls: ['http://localhost:<%= connect.options.port %>/index.html']
    }
    }
    },
    coffee: {
    dist: {
    files: [{
    // rather than compiling multiple files here you should
    // require them into your main .coffee file
    expand: true,
    cwd: '<%= yeoman.app %>/scripts',
    src: '*.coffee',
    dest: '.tmp/scripts',
    ext: '.js'
    }]
    },
    test: {
    files: [{
    expand: true,
    cwd: '.tmp/spec',
    src: '*.coffee',
    dest: 'test/spec'
    }]
    }
    },
    compass: {
    options: {
    sassDir: '<%= yeoman.app %>/styles',
    cssDir: '.tmp/styles',
    imagesDir: '<%= yeoman.app %>/images',
    javascriptsDir: '<%= yeoman.app %>/scripts',
    fontsDir: '<%= yeoman.app %>/styles/fonts',
    importPath: 'app/components',
    relativeAssets: true
    },
    dist: {},
    server: {
    options: {
    debugInfo: true
    }
    }
    },
    // not used since Uglify task does concat,
    // but still available if needed
    /*concat: {
    dist: {}
    },*/

    uglify: {
    dist: {
    files: {
    '<%= yeoman.dist %>/scripts/main.js': [
    '<%= yeoman.app %>/scripts/{,*/}*.js'
    ],
    }
    }
    },
    useminPrepare: {
    html: '.tmp/index.html',
    options: {
    dest: '<%= yeoman.dist %>'
    }
    },
    usemin: {
    html: ['<%= yeoman.dist %>/{,*/}*.html'],
    css: ['<%= yeoman.dist %>/styles/{,*/}*.css'],
    options: {
    dirs: ['<%= yeoman.dist %>']
    }
    },
    imagemin: {
    dist: {
    files: [{
    expand: true,
    cwd: '<%= yeoman.app %>/images',
    src: '{,*/}*.{png,jpg,jpeg}',
    dest: '<%= yeoman.dist %>/images'
    }]
    }
    },
    cssmin: {
    dist: {
    files: {
    '<%= yeoman.dist %>/styles/main.css': [
    '.tmp/styles/{,*/}*.css',
    '<%= yeoman.app %>/styles/{,*/}*.css'
    ]
    }
    }
    },
    htmlmin: {
    dist: {
    options: {
    /*removeCommentsFromCDATA: true,
    // https://github.com/yeoman/grunt-usemin/issues/44
    //collapseWhitespace: true,
    collapseBooleanAttributes: true,
    removeAttributeQuotes: true,
    removeRedundantAttributes: true,
    useShortDoctype: true,
    removeEmptyAttributes: true,
    removeOptionalTags: true*/
    },
    files: [{
    expand: true,
    cwd: '.tmp',
    src: '*.html',
    dest: '<%= yeoman.dist %>'
    }]
    }
    },
    copy: {
    dist: {
    files: [{
    expand: true,
    dot: true,
    cwd: '<%= yeoman.app %>',
    dest: '<%= yeoman.dist %>',
    src: [
    '*.{ico,txt}',
    '.htaccess'
    ]
    }]
    }
    },
    bower: {
    all: {
    rjsConfig: '<%= yeoman.app %>/scripts/main.js'
    }
    },
    jade: {
    dist: {
    options: {
    pretty: true
    },
    files: [{
    expand: true,
    cwd: '<%= yeoman.app %>',
    dest: '.tmp',
    src: '*.jade',
    ext: '.html'
    }]
    }
    }
    });

    grunt.renameTask('regarde', 'watch');

    grunt.registerTask('server', function (target) {
    if (target === 'dist') {
    return grunt.task.run(['build', 'open', 'connect:dist:keepalive']);
    }

    grunt.task.run([
    'clean:server',
    'coffee:dist',
    'compass:server',
    'jade',
    'livereload-start',
    'connect:livereload',
    'open',
    'watch'
    ]);
    });

    grunt.registerTask('test', [
    'clean:server',
    'coffee',
    'compass',
    'connect:test',
    'mocha'
    ]);

    grunt.registerTask('build', [
    'clean:dist',
    'coffee',
    'compass:dist',
    'jade',
    'useminPrepare',
    'imagemin',
    'htmlmin',
    'concat',
    'cssmin',
    'uglify',
    'copy',
    'usemin'
    ]);

    grunt.registerTask('default', [
    'jshint',
    'test',
    'build'
    ]);
    };
    74 changes: 0 additions & 74 deletions 02-index.jade
    View file
    Original file line number Diff line number Diff line change
    @@ -1,74 +0,0 @@
    !!! 5
    //if lt IE 7
    html.no-js.lt-ie9.lt-ie8.lt-ie7
    //if IE 7
    html.no-js.lt-ie9.lt-ie8
    //if IE 8
    html.no-js.lt-ie9
    // [if gt IE 8] <!
    html.no-js
    // <![endif]
    head
    meta(charset='utf-8')
    meta(http-equiv='X-UA-Compatible', content='IE=edge,chrome=1')
    title
    meta(name='description', content='')
    meta(name='viewport', content='width=device-width')
    // Place favicon.ico and apple-touch-icon.png in the root directory
    link(rel='stylesheet', href='styles/main.css')
    // build:js scripts/vendor/modernizr.js
    script(src='components/modernizr/modernizr.js')
    // endbuild
    body
    .container
    .hero-unit
    h1 'Allo, 'Allo!
    p You now have
    ul
    li HTML5 Boilerplate
    li Twitter Bootstrap
    p installed.
    h3 Enjoy coding! - Yeoman

    //if lt IE 7
    p.chromeframe
    | You are using an
    strong outdated
    | browser. Please
    a(href='http://browsehappy.com/') upgrade your browser
    | or
    a(href='http://www.google.com/chromeframe/?redirect=true') activate Google Chrome Frame
    | to improve your experience.
    // Google Analytics: change UA-XXXXX-X to be your site's ID.
    script
    var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
    (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
    g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
    s.parentNode.insertBefore(g,s)}(document,'script'));

    // build:js scripts/main.js
    script(src='components/jquery/jquery.js')
    script(src='scripts/main.js')
    // endbuild
    // build:js(.tmp) scripts/coffee.js
    script(src='scripts/hello.js')
    // endbuild
    // build:js scripts/plugins.js
    script(src='components/sass-bootstrap/js/bootstrap-affix.js')
    script(src='components/sass-bootstrap/js/bootstrap-alert.js')
    script(src='components/sass-bootstrap/js/bootstrap-dropdown.js')
    script(src='components/sass-bootstrap/js/bootstrap-tooltip.js')
    script(src='components/sass-bootstrap/js/bootstrap-modal.js')
    script(src='components/sass-bootstrap/js/bootstrap-transition.js')
    script(src='components/sass-bootstrap/js/bootstrap-button.js')
    script(src='components/sass-bootstrap/js/bootstrap-popover.js')
    script(src='components/sass-bootstrap/js/bootstrap-typeahead.js')
    script(src='components/sass-bootstrap/js/bootstrap-carousel.js')
    script(src='components/sass-bootstrap/js/bootstrap-scrollspy.js')
    script(src='components/sass-bootstrap/js/bootstrap-collapse.js')
    script(src='components/sass-bootstrap/js/bootstrap-tab.js')
    // endbuild
    116 changes: 116 additions & 0 deletions jade.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,116 @@
    # How to use Jade with Yeoman

    ## Getting started

    * Make sure you have [yo](https://github.com/yeoman/yo) installed: `npm install -g yo`
    * Run: `yo webapp`
    * Install [grunt-contrib-jade](https://github.com/gruntjs/grunt-contrib-jade): `npm install grunt-contrib-jade --save-dev`

    ## Customization

    When running `yo webapp` a Gruntfile.js will be generated in your project
    root. By default, we include a basic set of Grunt tasks but you are free to add
    more according to your needs. For more information on how to install and
    configure Grunt tasks, read the [Getting started](http://gruntjs.com/getting-started) guide.

    To get Jade working, we have to setup our Jade task. You can find more info and
    documentation for the Jade task [here](https://github.com/gruntjs/grunt-contrib-jade).

    ```js
    jade: {
    dist: {
    options: {
    pretty: true
    },
    files: [{
    expand: true,
    cwd: '<%= yeoman.app %>',
    dest: '.tmp',
    src: '*.jade',
    ext: '.html'
    }]
    }
    }
    ```

    The above example tells Jade to look for `.jade` files in the `<%= yeoman.app %>`
    folder and compile them into the `.tmp` folder. Since `watch:livereload`,
    `useminPrepare` and `htmlmin` are looking for your HTML files in `<%= yeoman.app %>`
    we have to change them. Simply replace the references pointing to `<% yeoman.app %>/*.html`
    to `.tmp/*.html`. We also have to add Jade to the watch task so that your Jade
    templates compiles while running `grunt server`. It should look something like this:

    ```js
    watch: {
    jade: {
    files: ['<% yeoman.app %>/*.jade'],
    tasks: ['jade']
    },
    livereload: {
    files: [
    '.tmp/*.html',
    '{.tmp,<%%= yeoman.app %>}/styles/{,*/}*.css',
    '{.tmp,<%%= yeoman.app %>}/scripts/{,*/}*.js',
    '<%%= yeoman.app %>/images/{,*/}*.{png,jpg,jpeg,gif,webp}'
    ],
    tasks: ['livereload']
    }
    },
    useminPrepare: {
    html: '.tmp/index.html',
    options: {
    dest: '<%= yeoman.dist %>'
    }
    },
    htmlmin: {
    dist: {
    files: [{
    expand: true,
    cwd: '.tmp',
    src: '*.html',
    dest: '<%= yeoman.dist %>'
    }]
    }
    }
    ``

    Finally, change your `server` and `build` tasks to include the `jade` task.

    ```js
    grunt.registerTask('server', function (target) {
    if (target === 'dist') {
    return grunt.task.run(['build', 'open', 'connect:dist:keepalive']);
    }
    grunt.task.run([
    'clean:server',
    'coffee:dist',
    'compass:server',
    'jade',
    'livereload-start',
    'connect:livereload',
    'open',
    'watch'
    ]);
    });
    grunt.registerTask('build', [
    'clean:dist',
    'coffee',
    'compass:dist',
    'jade',
    'useminPrepare',
    'imagemin',
    'htmlmin',
    'concat',
    'cssmin',
    'uglify',
    'copy',
    'usemin'
    ]);
    ```

    Replace the `index.html` in your `app/` folder with an `index.jade`. You can convert
    the default `index.html` to `.jade` on [html2jade.com](http://html2jade.com/).
    Then try running `grunt server` and you should be served a page with a 'Allo 'allo
    message.
  9. @kevva kevva revised this gist Mar 20, 2013. 2 changed files with 0 additions and 2 deletions.
    1 change: 0 additions & 1 deletion 00-readme.md
    View file
    Original file line number Diff line number Diff line change
    @@ -18,7 +18,6 @@ jade: {
    },
    files: [{
    expand: true,
    flatten: true,
    cwd: '<%= yeoman.app %>',
    dest: '.tmp',
    src: '*.jade',
    1 change: 0 additions & 1 deletion 01-gruntfile.js
    View file
    Original file line number Diff line number Diff line change
    @@ -248,7 +248,6 @@ module.exports = function (grunt) {
    },
    files: [{
    expand: true,
    flatten: true,
    cwd: '<%= yeoman.app %>',
    dest: '.tmp',
    src: '*.jade',
  10. @kevva kevva revised this gist Mar 20, 2013. 3 changed files with 64 additions and 62 deletions.
    1 change: 1 addition & 0 deletions 00-readme.md
    View file
    Original file line number Diff line number Diff line change
    @@ -18,6 +18,7 @@ jade: {
    },
    files: [{
    expand: true,
    flatten: true,
    cwd: '<%= yeoman.app %>',
    dest: '.tmp',
    src: '*.jade',
    1 change: 1 addition & 0 deletions 01-gruntfile.js
    View file
    Original file line number Diff line number Diff line change
    @@ -248,6 +248,7 @@ module.exports = function (grunt) {
    },
    files: [{
    expand: true,
    flatten: true,
    cwd: '<%= yeoman.app %>',
    dest: '.tmp',
    src: '*.jade',
    124 changes: 62 additions & 62 deletions 02-index.jade
    View file
    Original file line number Diff line number Diff line change
    @@ -1,74 +1,74 @@
    !!! 5
    //if lt IE 7
    html.no-js.lt-ie9.lt-ie8.lt-ie7
    html.no-js.lt-ie9.lt-ie8.lt-ie7
    //if IE 7
    html.no-js.lt-ie9.lt-ie8
    html.no-js.lt-ie9.lt-ie8
    //if IE 8
    html.no-js.lt-ie9
    html.no-js.lt-ie9
    // [if gt IE 8] <!
    html.no-js
    // <![endif]
    head
    meta(charset='utf-8')
    meta(http-equiv='X-UA-Compatible', content='IE=edge,chrome=1')
    title
    meta(name='description', content='')
    meta(name='viewport', content='width=device-width')
    // Place favicon.ico and apple-touch-icon.png in the root directory
    link(rel='stylesheet', href='styles/main.css')
    // build:js scripts/vendor/modernizr.js
    script(src='components/modernizr/modernizr.js')
    // endbuild
    // <![endif]
    head
    meta(charset='utf-8')
    meta(http-equiv='X-UA-Compatible', content='IE=edge,chrome=1')
    title
    meta(name='description', content='')
    meta(name='viewport', content='width=device-width')
    // Place favicon.ico and apple-touch-icon.png in the root directory
    link(rel='stylesheet', href='styles/main.css')
    // build:js scripts/vendor/modernizr.js
    script(src='components/modernizr/modernizr.js')
    // endbuild
    body
    .container
    .hero-unit
    h1 'Allo, 'Allo!
    p You now have
    ul
    li HTML5 Boilerplate
    li Twitter Bootstrap
    p installed.
    h3 Enjoy coding! - Yeoman
    body
    .container
    .hero-unit
    h1 'Allo, 'Allo!
    p You now have
    ul
    li HTML5 Boilerplate
    li Twitter Bootstrap
    p installed.
    h3 Enjoy coding! - Yeoman

    //if lt IE 7
    p.chromeframe
    | You are using an
    strong outdated
    | browser. Please
    a(href='http://browsehappy.com/') upgrade your browser
    | or
    a(href='http://www.google.com/chromeframe/?redirect=true') activate Google Chrome Frame
    | to improve your experience.
    //if lt IE 7
    p.chromeframe
    | You are using an
    strong outdated
    | browser. Please
    a(href='http://browsehappy.com/') upgrade your browser
    | or
    a(href='http://www.google.com/chromeframe/?redirect=true') activate Google Chrome Frame
    | to improve your experience.
    // Google Analytics: change UA-XXXXX-X to be your site's ID.
    script
    var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
    (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
    g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
    s.parentNode.insertBefore(g,s)}(document,'script'));
    // Google Analytics: change UA-XXXXX-X to be your site's ID.
    script
    var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
    (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
    g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
    s.parentNode.insertBefore(g,s)}(document,'script'));

    // build:js scripts/main.js
    script(src='components/jquery/jquery.js')
    script(src='scripts/main.js')
    // endbuild
    // build:js scripts/main.js
    script(src='components/jquery/jquery.js')
    script(src='scripts/main.js')
    // endbuild
    // build:js(.tmp) scripts/coffee.js
    script(src='scripts/hello.js')
    // endbuild
    // build:js(.tmp) scripts/coffee.js
    script(src='scripts/hello.js')
    // endbuild
    // build:js scripts/plugins.js
    script(src='components/sass-bootstrap/js/bootstrap-affix.js')
    script(src='components/sass-bootstrap/js/bootstrap-alert.js')
    script(src='components/sass-bootstrap/js/bootstrap-dropdown.js')
    script(src='components/sass-bootstrap/js/bootstrap-tooltip.js')
    script(src='components/sass-bootstrap/js/bootstrap-modal.js')
    script(src='components/sass-bootstrap/js/bootstrap-transition.js')
    script(src='components/sass-bootstrap/js/bootstrap-button.js')
    script(src='components/sass-bootstrap/js/bootstrap-popover.js')
    script(src='components/sass-bootstrap/js/bootstrap-typeahead.js')
    script(src='components/sass-bootstrap/js/bootstrap-carousel.js')
    script(src='components/sass-bootstrap/js/bootstrap-scrollspy.js')
    script(src='components/sass-bootstrap/js/bootstrap-collapse.js')
    script(src='components/sass-bootstrap/js/bootstrap-tab.js')
    // endbuild
    // build:js scripts/plugins.js
    script(src='components/sass-bootstrap/js/bootstrap-affix.js')
    script(src='components/sass-bootstrap/js/bootstrap-alert.js')
    script(src='components/sass-bootstrap/js/bootstrap-dropdown.js')
    script(src='components/sass-bootstrap/js/bootstrap-tooltip.js')
    script(src='components/sass-bootstrap/js/bootstrap-modal.js')
    script(src='components/sass-bootstrap/js/bootstrap-transition.js')
    script(src='components/sass-bootstrap/js/bootstrap-button.js')
    script(src='components/sass-bootstrap/js/bootstrap-popover.js')
    script(src='components/sass-bootstrap/js/bootstrap-typeahead.js')
    script(src='components/sass-bootstrap/js/bootstrap-carousel.js')
    script(src='components/sass-bootstrap/js/bootstrap-scrollspy.js')
    script(src='components/sass-bootstrap/js/bootstrap-collapse.js')
    script(src='components/sass-bootstrap/js/bootstrap-tab.js')
    // endbuild
  11. @kevva kevva revised this gist Mar 20, 2013. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion 00-readme.md
    View file
    Original file line number Diff line number Diff line change
    @@ -27,7 +27,7 @@ jade: {
    }
    ```

    Then we have to change the paths where `watch:livereload`, `useminPrepare`, `usemin` and `htmlmin` are looking for `*.html` files. Basically change the references pointing to `<% yeoman.app %>/*.html` to `.tmp/*.html`. See the example Gruntfile.js below for a working example.
    Then we have to change the paths where `watch:livereload`, `useminPrepare`, and `htmlmin` are looking for `*.html` files. Basically change the references pointing to `<% yeoman.app %>/*.html` to `.tmp/*.html`. See the example Gruntfile.js below for a working example.

    Finally, change your `server` and `build` tasks to include the jade task.

  12. @kevva kevva revised this gist Mar 20, 2013. 1 changed file with 6 additions and 0 deletions.
    6 changes: 6 additions & 0 deletions 02-index.jade
    View file
    Original file line number Diff line number Diff line change
    @@ -19,6 +19,7 @@ html.no-js
    // build:js scripts/vendor/modernizr.js
    script(src='components/modernizr/modernizr.js')
    // endbuild
    body
    .container
    .hero-unit
    @@ -29,6 +30,7 @@ html.no-js
    li Twitter Bootstrap
    p installed.
    h3 Enjoy coding! - Yeoman

    //if lt IE 7
    p.chromeframe
    | You are using an
    @@ -38,19 +40,23 @@ html.no-js
    | or
    a(href='http://www.google.com/chromeframe/?redirect=true') activate Google Chrome Frame
    | to improve your experience.
    // Google Analytics: change UA-XXXXX-X to be your site's ID.
    script
    var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
    (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
    g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
    s.parentNode.insertBefore(g,s)}(document,'script'));

    // build:js scripts/main.js
    script(src='components/jquery/jquery.js')
    script(src='scripts/main.js')
    // endbuild
    // build:js(.tmp) scripts/coffee.js
    script(src='scripts/hello.js')
    // endbuild
    // build:js scripts/plugins.js
    script(src='components/sass-bootstrap/js/bootstrap-affix.js')
    script(src='components/sass-bootstrap/js/bootstrap-alert.js')
  13. @kevva kevva revised this gist Mar 20, 2013. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion 00-readme.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,4 @@
    # How to use Jade with the webapp generator
    # How to use Jade with Yeoman

    ## Getting started

  14. @kevva kevva created this gist Mar 20, 2013.
    68 changes: 68 additions & 0 deletions 00-readme.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,68 @@
    # How to use Jade with the webapp generator

    ## Getting started

    * Make sure you have [yo](https://github.com/yeoman/yo) installed: `npm install -g yo`
    * Run: `yo webapp`
    * Install [grunt-contrib-jade](https://github.com/gruntjs/grunt-contrib-jade): `npm install grunt-contrib-jade --save-dev`

    ## Customization

    First of all, we have to setup our jade task. You can find documentation for the task [here](https://github.com/gruntjs/grunt-contrib-jade).

    ```js
    jade: {
    dist: {
    options: {
    pretty: true
    },
    files: [{
    expand: true,
    cwd: '<%= yeoman.app %>',
    dest: '.tmp',
    src: '*.jade',
    ext: '.html'
    }]
    }
    }
    ```

    Then we have to change the paths where `watch:livereload`, `useminPrepare`, `usemin` and `htmlmin` are looking for `*.html` files. Basically change the references pointing to `<% yeoman.app %>/*.html` to `.tmp/*.html`. See the example Gruntfile.js below for a working example.

    Finally, change your `server` and `build` tasks to include the jade task.

    ```js
    grunt.registerTask('server', function (target) {
    if (target === 'dist') {
    return grunt.task.run(['build', 'open', 'connect:dist:keepalive']);
    }

    grunt.task.run([
    'clean:server',
    'coffee:dist',
    'compass:server',
    'jade',
    'livereload-start',
    'connect:livereload',
    'open',
    'watch'
    ]);
    });

    grunt.registerTask('build', [
    'clean:dist',
    'coffee',
    'compass:dist',
    'jade',
    'useminPrepare',
    'imagemin',
    'htmlmin',
    'concat',
    'cssmin',
    'uglify',
    'copy',
    'usemin'
    ]);
    ```

    Replace the `index.html` in your `app/` folder with the `index.jade` included below and try running `grunt server`. If everything works correctly you should see a "'Allo 'allo" message.
    307 changes: 307 additions & 0 deletions 01-gruntfile.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,307 @@
    // Generated on 2013-03-20 using generator-webapp 0.1.5
    'use strict';
    var lrSnippet = require('grunt-contrib-livereload/lib/utils').livereloadSnippet;
    var mountFolder = function (connect, dir) {
    return connect.static(require('path').resolve(dir));
    };

    // # Globbing
    // for performance reasons we're only matching one level down:
    // 'test/spec/{,*/}*.js'
    // use this if you want to match all subfolders:
    // 'test/spec/**/*.js'

    module.exports = function (grunt) {
    // load all grunt tasks
    require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);

    // configurable paths
    var yeomanConfig = {
    app: 'app',
    dist: 'dist'
    };

    grunt.initConfig({
    yeoman: yeomanConfig,
    watch: {
    coffee: {
    files: ['<%= yeoman.app %>/scripts/{,*/}*.coffee'],
    tasks: ['coffee:dist']
    },
    coffeeTest: {
    files: ['test/spec/{,*/}*.coffee'],
    tasks: ['coffee:test']
    },
    compass: {
    files: ['<%= yeoman.app %>/styles/{,*/}*.{scss,sass}'],
    tasks: ['compass']
    },
    jade: {
    files: ['<% yeoman.app %>/*.jade'],
    tasks: ['jade']
    },
    livereload: {
    files: [
    '.tmp/*.html',
    '{.tmp,<%= yeoman.app %>}/styles/{,*/}*.css',
    '{.tmp,<%= yeoman.app %>}/scripts/{,*/}*.js',
    '<%= yeoman.app %>/images/{,*/}*.{png,jpg,jpeg,webp}'
    ],
    tasks: ['livereload']
    }
    },
    connect: {
    options: {
    port: 9000,
    // change this to '0.0.0.0' to access the server from outside
    hostname: 'localhost'
    },
    livereload: {
    options: {
    middleware: function (connect) {
    return [
    lrSnippet,
    mountFolder(connect, '.tmp'),
    mountFolder(connect, 'app')
    ];
    }
    }
    },
    test: {
    options: {
    middleware: function (connect) {
    return [
    mountFolder(connect, '.tmp'),
    mountFolder(connect, 'test')
    ];
    }
    }
    },
    dist: {
    options: {
    middleware: function (connect) {
    return [
    mountFolder(connect, 'dist')
    ];
    }
    }
    }
    },
    open: {
    server: {
    path: 'http://localhost:<%= connect.options.port %>'
    }
    },
    clean: {
    dist: ['.tmp', '<%= yeoman.dist %>/*'],
    server: '.tmp'
    },
    jshint: {
    options: {
    jshintrc: '.jshintrc'
    },
    all: [
    'Gruntfile.js',
    '<%= yeoman.app %>/scripts/{,*/}*.js',
    '!<%= yeoman.app %>/scripts/vendor/*',
    'test/spec/{,*/}*.js'
    ]
    },
    mocha: {
    all: {
    options: {
    run: true,
    urls: ['http://localhost:<%= connect.options.port %>/index.html']
    }
    }
    },
    coffee: {
    dist: {
    files: [{
    // rather than compiling multiple files here you should
    // require them into your main .coffee file
    expand: true,
    cwd: '<%= yeoman.app %>/scripts',
    src: '*.coffee',
    dest: '.tmp/scripts',
    ext: '.js'
    }]
    },
    test: {
    files: [{
    expand: true,
    cwd: '.tmp/spec',
    src: '*.coffee',
    dest: 'test/spec'
    }]
    }
    },
    compass: {
    options: {
    sassDir: '<%= yeoman.app %>/styles',
    cssDir: '.tmp/styles',
    imagesDir: '<%= yeoman.app %>/images',
    javascriptsDir: '<%= yeoman.app %>/scripts',
    fontsDir: '<%= yeoman.app %>/styles/fonts',
    importPath: 'app/components',
    relativeAssets: true
    },
    dist: {},
    server: {
    options: {
    debugInfo: true
    }
    }
    },
    // not used since Uglify task does concat,
    // but still available if needed
    /*concat: {
    dist: {}
    },*/

    uglify: {
    dist: {
    files: {
    '<%= yeoman.dist %>/scripts/main.js': [
    '<%= yeoman.app %>/scripts/{,*/}*.js'
    ],
    }
    }
    },
    useminPrepare: {
    html: '.tmp/index.html',
    options: {
    dest: '<%= yeoman.dist %>'
    }
    },
    usemin: {
    html: ['<%= yeoman.dist %>/{,*/}*.html'],
    css: ['<%= yeoman.dist %>/styles/{,*/}*.css'],
    options: {
    dirs: ['<%= yeoman.dist %>']
    }
    },
    imagemin: {
    dist: {
    files: [{
    expand: true,
    cwd: '<%= yeoman.app %>/images',
    src: '{,*/}*.{png,jpg,jpeg}',
    dest: '<%= yeoman.dist %>/images'
    }]
    }
    },
    cssmin: {
    dist: {
    files: {
    '<%= yeoman.dist %>/styles/main.css': [
    '.tmp/styles/{,*/}*.css',
    '<%= yeoman.app %>/styles/{,*/}*.css'
    ]
    }
    }
    },
    htmlmin: {
    dist: {
    options: {
    /*removeCommentsFromCDATA: true,
    // https://github.com/yeoman/grunt-usemin/issues/44
    //collapseWhitespace: true,
    collapseBooleanAttributes: true,
    removeAttributeQuotes: true,
    removeRedundantAttributes: true,
    useShortDoctype: true,
    removeEmptyAttributes: true,
    removeOptionalTags: true*/
    },
    files: [{
    expand: true,
    cwd: '.tmp',
    src: '*.html',
    dest: '<%= yeoman.dist %>'
    }]
    }
    },
    copy: {
    dist: {
    files: [{
    expand: true,
    dot: true,
    cwd: '<%= yeoman.app %>',
    dest: '<%= yeoman.dist %>',
    src: [
    '*.{ico,txt}',
    '.htaccess'
    ]
    }]
    }
    },
    bower: {
    all: {
    rjsConfig: '<%= yeoman.app %>/scripts/main.js'
    }
    },
    jade: {
    dist: {
    options: {
    pretty: true
    },
    files: [{
    expand: true,
    cwd: '<%= yeoman.app %>',
    dest: '.tmp',
    src: '*.jade',
    ext: '.html'
    }]
    }
    }
    });

    grunt.renameTask('regarde', 'watch');

    grunt.registerTask('server', function (target) {
    if (target === 'dist') {
    return grunt.task.run(['build', 'open', 'connect:dist:keepalive']);
    }

    grunt.task.run([
    'clean:server',
    'coffee:dist',
    'compass:server',
    'jade',
    'livereload-start',
    'connect:livereload',
    'open',
    'watch'
    ]);
    });

    grunt.registerTask('test', [
    'clean:server',
    'coffee',
    'compass',
    'connect:test',
    'mocha'
    ]);

    grunt.registerTask('build', [
    'clean:dist',
    'coffee',
    'compass:dist',
    'jade',
    'useminPrepare',
    'imagemin',
    'htmlmin',
    'concat',
    'cssmin',
    'uglify',
    'copy',
    'usemin'
    ]);

    grunt.registerTask('default', [
    'jshint',
    'test',
    'build'
    ]);
    };
    68 changes: 68 additions & 0 deletions 02-index.jade
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,68 @@
    !!! 5
    //if lt IE 7
    html.no-js.lt-ie9.lt-ie8.lt-ie7
    //if IE 7
    html.no-js.lt-ie9.lt-ie8
    //if IE 8
    html.no-js.lt-ie9
    // [if gt IE 8] <!
    html.no-js
    // <![endif]
    head
    meta(charset='utf-8')
    meta(http-equiv='X-UA-Compatible', content='IE=edge,chrome=1')
    title
    meta(name='description', content='')
    meta(name='viewport', content='width=device-width')
    // Place favicon.ico and apple-touch-icon.png in the root directory
    link(rel='stylesheet', href='styles/main.css')
    // build:js scripts/vendor/modernizr.js
    script(src='components/modernizr/modernizr.js')
    // endbuild
    body
    .container
    .hero-unit
    h1 'Allo, 'Allo!
    p You now have
    ul
    li HTML5 Boilerplate
    li Twitter Bootstrap
    p installed.
    h3 Enjoy coding! - Yeoman
    //if lt IE 7
    p.chromeframe
    | You are using an
    strong outdated
    | browser. Please
    a(href='http://browsehappy.com/') upgrade your browser
    | or
    a(href='http://www.google.com/chromeframe/?redirect=true') activate Google Chrome Frame
    | to improve your experience.
    // Google Analytics: change UA-XXXXX-X to be your site's ID.
    script
    var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
    (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
    g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
    s.parentNode.insertBefore(g,s)}(document,'script'));
    // build:js scripts/main.js
    script(src='components/jquery/jquery.js')
    script(src='scripts/main.js')
    // endbuild
    // build:js(.tmp) scripts/coffee.js
    script(src='scripts/hello.js')
    // endbuild
    // build:js scripts/plugins.js
    script(src='components/sass-bootstrap/js/bootstrap-affix.js')
    script(src='components/sass-bootstrap/js/bootstrap-alert.js')
    script(src='components/sass-bootstrap/js/bootstrap-dropdown.js')
    script(src='components/sass-bootstrap/js/bootstrap-tooltip.js')
    script(src='components/sass-bootstrap/js/bootstrap-modal.js')
    script(src='components/sass-bootstrap/js/bootstrap-transition.js')
    script(src='components/sass-bootstrap/js/bootstrap-button.js')
    script(src='components/sass-bootstrap/js/bootstrap-popover.js')
    script(src='components/sass-bootstrap/js/bootstrap-typeahead.js')
    script(src='components/sass-bootstrap/js/bootstrap-carousel.js')
    script(src='components/sass-bootstrap/js/bootstrap-scrollspy.js')
    script(src='components/sass-bootstrap/js/bootstrap-collapse.js')
    script(src='components/sass-bootstrap/js/bootstrap-tab.js')
    // endbuild