Git Product home page Git Product logo

generator-webapp_deprecated's Introduction

Welcome, Friend!

Yeoman is a robust and opinionated set of tools, libraries, and a workflow that can help developers quickly build beautiful, compelling web apps.

image

Code of Conduct

Everyone in this community (from core members to random committers and volunteers) are asked to please act in accordance with the Yeoman Community Contributor Code of Conduct. We encourage you to follow these social rules which help guide our interactions with each other, and ensure we provide a safe environment for everyone. We aim to make Yeoman a positive, welcoming, open and inclusive project and community.

Code of Conduct

Issue Submission

Make sure you've read the issue submission guidelines before you open a new issue.

Yeoman is composed of a number of different sub-projects, most of which have their own dedicated repository. If you are looking for a repo for a particular piece, you'll find it on the organization page.

Feature requests

Feature requests should be submitted to the repo it concerns. Submit to yeoman/yeoman if you're unsure, otherwise the repositories for our officially maintained generators can be found here.

Contribute

See the contributing docs

Support

Need help or have a question?

Please don't use the issue trackers for support/questions.

Links

Team

Yeoman is beautifully crafted by these people and a bunch of awesome contributors

Addy Osmani Sindre Sorhus Pascal Hartig Stephen Sawchuk Simon Boudrias
Addy Osmani Sindre Sorhus Pascal Hartig Stephen Sawchuk Simon Boudrias
Brian Ford Eddie Monge Paul Irish Hemanth.HM Revath S Kumar
Brian Ford Eddie Monge Paul Irish Hemanth.HM Revath S Kumar
Jimmy Moon Frederick Ros Mickael Daniel Eric Bidelman Matija Marohnić
Jimmy Moon Frederick Ros Mickael Daniel Eric Bidelman Matija Marohnić
Kevin Mårtensson Arthur Verschaeve Michael Kühnel Mehdy Dara Ulises Gascon
Kevin Mårtensson Arthur Verschaeve Michael Kühnel Mehdy Dara Ulises Gascon

Backers

Love Yeoman work and community? Help us keep it alive by donating funds to cover project expenses!
[Become a backer]

License

BSD license Copyright (c) Google

generator-webapp_deprecated's People

Contributors

addyosmani avatar alefteris avatar alrra avatar arthurvr avatar callumlocke avatar cgcgbcbc avatar danmer avatar eddiemonge avatar fluke avatar gaboesquivel avatar handtrix avatar jamiebuilds avatar kevva avatar kingscooty avatar masakura avatar matheusazzi avatar mklabs avatar neilhem avatar notherdev avatar oxnard805 avatar passy avatar peol avatar raphaelvalerio avatar richardwestenra avatar robwalch avatar silvenon avatar sindresorhus avatar sleeper avatar stevemao avatar tschaub avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

generator-webapp_deprecated's Issues

Should live reload watch for svg image files?

Should live reload watch for svg image files? Right now it doesn't.

There could be a problem if the svg files are the "original" files (like .psd or .ai are), and they are exported to pngs manually or with scripts in order to be used by the site. In this case, I wouldn't want them to be watched by live reload.

But I think "original" files should kept in a directory outside of app/images/. What do you think?

`error: Invalid input` during webapp setup

On fresh npm installs of yo, grunt, bower, and generator-webapp, running yo webapp asks:

[?] Would you like to include Twitter Bootstrap for Sass? (Y/n)

Answering Y, y, N, n, foo, <Enter>... anything, returns error: Invalid input. Ctrl+C gets me out of there, and the resulting scaffold seems to run just fine, all tests pass, etc.

OS X 10.8.3
[email protected]
[email protected]
[email protected]
[email protected]

test/ » echo $PATH $NODE_PATH && node -e 'console.log(process.platform, process.versions)'
./bin:/usr/local/bin:/usr/local/sbin:/Users/gibson/.sfs:/Users/gibson/.dotfiles/bin:/usr/local/share/npm/bin:/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/bin:/opt/X11/bin
darwin { http_parser: '1.0',
  node: '0.10.8',
  v8: '3.14.5.9',
  ares: '1.9.0-DEV',
  uv: '0.10.8',
  zlib: '1.2.3',
  modules: '11',
  openssl: '1.0.1e' }

'grunt server' fails to start server

Running grunt server on my machine didn't seem to work, the browser just spins trying to connect to the server but never gets there.

I put the live reload snippet to the end of the middleware and it fixed the issue. I don't know enough to understand why this works but have rough ideas, does this make to others? If so will make pull request to change the gruntfile.js template.

livereload: {
options: {
middleware: function (connect) {
return [
mountFolder(connect, '.tmp'),
mountFolder(connect, yeomanConfig.app),
lrSnippet
];
}
}
},

yeoman 1.0's webapp generator creates two requirejs blocks

I have noticed that fresh generated webapp generates 2 requirejs blocks:

       <!-- build:js scripts/amd-app.js -->
        <script data-main="scripts/main" src="scripts/vendor/require.js"></script>
        <!-- endbuild -->

        <!-- build:js scripts/plugins.js -->
        <script src="components/sass-bootstrap/js/bootstrap-affix.js"></script>
        <script src="components/sass-bootstrap/js/bootstrap-alert.js"></script>
        <script src="components/sass-bootstrap/js/bootstrap-dropdown.js"></script>
        <script src="components/sass-bootstrap/js/bootstrap-tooltip.js"></script>
        <script src="components/sass-bootstrap/js/bootstrap-modal.js"></script>
        <script src="components/sass-bootstrap/js/bootstrap-transition.js"></script>
        <script src="components/sass-bootstrap/js/bootstrap-button.js"></script>
        <script src="components/sass-bootstrap/js/bootstrap-popover.js"></script>
        <script src="components/sass-bootstrap/js/bootstrap-typeahead.js"></script>
        <script src="components/sass-bootstrap/js/bootstrap-carousel.js"></script>
        <script src="components/sass-bootstrap/js/bootstrap-scrollspy.js"></script>
        <script src="components/sass-bootstrap/js/bootstrap-collapse.js"></script>
        <script src="components/sass-bootstrap/js/bootstrap-tab.js"></script>
        <!-- endbuild -->

        <!-- build:js scripts/amd-app.js -->
        <script data-main="scripts/main" src="scripts/vendor/require.js"></script>
        <!-- endbuild -->

Unable to scaffold with -webapp (master) & yo (beta6)

I've tried this a few times, after having cleaned the npm cache and uninstalled everything. Consistently dies during yo webapp with:

pre-build test passed successfully, skipping build...
npm http GET https://registry.npmjs.org/lru-cache
npm http GET https://registry.npmjs.org/sigmund
npm http GET https://registry.npmjs.org/glob
npm http 304 https://registry.npmjs.org/sigmund
npm http 304 https://registry.npmjs.org/lru-cache
npm http 304 https://registry.npmjs.org/glob
npm http GET https://registry.npmjs.org/graceful-fs
npm http GET https://registry.npmjs.org/inherits
npm http 304 https://registry.npmjs.org/graceful-fs
npm http 304 https://registry.npmjs.org/inherits
npm ERR!
npm ERR! Additional logging details can be found in:
npm ERR!     /Users/addyo/projects/yeoman-testing/app/npm-debug.log
npm ERR! not ok code 0

Relevant output from npm-debug:

16479 info postuninstall [email protected]
16480 error [email protected] install: `node install.js`
16480 error `sh "-c" "node install.js"` failed with 1
16481 error Failed at the [email protected] install script.
16481 error This is most likely a problem with the phantomjs package,
16481 error not with npm itself.
16481 error Tell the author that this fails on your system:
16481 error     node install.js
16481 error You can get their info via:
16481 error     npm owner ls phantomjs
16481 error There is likely additional logging output above.
16482 error System Darwin 12.3.0
16483 error command "node" "/usr/local/bin/npm" "install"
16484 error cwd /Users/addyo/projects/yeoman-testing/app
16485 error node -v v0.8.6
16486 error npm -v 1.1.48
16487 error code ELIFECYCLE
16488 verbose exit [ 1, true ]

Unused bootstrap.js

What is the purpose of app/scripts/vendor/bootstrap.js? As far as I see it this files is never used, since app/index.html only references the JS files of boostrap in bower_components/sass-bootstrap.

Sass build workflow

Hi,

Currently it is not possible to use sass generated files in usemin blocks.

  • Let's say I have <link rel="stylesheet" href="styles/main.css"> in the head of the document (but in reality am authoring sass file styles/main.scss).
  • When using grunt server, it is compiling the actual main.scss file in the background and serving it from the .tmp folder: Perfect so far
  • However now, if I have a min block like this:
<!-- build:css styles/all.css -->
<link rel="stylesheet" href="components/ratchet/dist/ratchet.css">
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->
  • The concat config will be updated to concatenate app/components/ratchet/dist/ratchet.css and app/styles/main.css into dist/styles/all.css
  • However it will never find the main.css file in the app styles folder cause it doesn't exist (it is located in .tmp where it is compiled).

So far I can't find any good solution to make the sass workflow work for both server mode and build mode. (to fix the build you can do this <link rel="stylesheet" href="../.tmp/styles/main.css"> but it breaks the server mode...)

Anyone has thoughts about that?

Grunt build wont update require.js path

After a grunt build it is currently not updating the path for require.js:

<script data-main="scripts/a57429ff.main" src="bower_components/requirejs/require.js"></script>

Shouldn't it be like /scripts/vendor/###.require.js

Add grunt-bower-hooks into Gruntfile tasks

Currently, the bower task grunt-bower-hooks is configured in the Gruntfile but seems it's not being used by any task. I was wondering why installing new components through Bower didn't updated RequireJS config until I saw this. Does it makes sense? If not, any other reason my RJS config doesn't updates in my main.js after installing components?

skip auto install

I would like to skip the auto install so : I tried

sudo yo webapp --skip-install

if this is the correct syntax it does not work for me - what should it be

using yeoman 1.0 v4

M

[email protected] : autoprefixer issue

Seems like there is an issue with the autoprefixer task in package.json :

Loading "autoprefixer.js" tasks...ERROR
>> Error: Cannot find module 'autoprefixer'

I had to remove the following line from package.json to fix this :

    "grunt-autoprefixer": "~0.1.20130516",

(note that I answered no to the Would you like to use autoprefixer for your CSS? yeoman question)

Add more questions to generator

Hi, i would like to propose to add more questions to the generator, like the following:

  • Would you like to include jQuery?
  • Are you going to use CoffeeScript?
  • Are you going to use Twitter Bootstrap at all? (this one answered "yes" could trigger "Would you like to include Twitter Bootstrap for Sass?")
  • Are you going to use Compass?

If answered "no", remove the files, reference in app/scripts/main.js, Grunt plugins and Gruntfile code blocks.

This seems good to allow smaller projects initialization and not having to remove lots of scaffolded code.

Compass not watching for changes within subdirectories of 'styles'

It seems that the watch task only runs when changes are made to files that are directly in the styles directory. If you create files within new directories, changes to those files will not trigger a recompile or the reload task. I believe adding an extra '*' to the compass files glob in the Gruntfile.js would solve this.

compass: {
    files: ['<%= yeoman.app %>/styles/{,**/}*.{scss,sass}'],
    tasks: ['compass']
},

Images/CSS paths are wrong when using Compass and the server task

Hi, i'm trying to build my project and this are the errors i'm finding:

Running just grunt works fine, gets me a working app on dist/ dir. The problem is with the server task. When running grunt server, webserver seems to run from the app/ dir and my HTML points to a stylesheet in styles/main.css which doesn't exists in app/styles/ because it's a Sass file named main.scss. Running grunt server:dist seems to compile and run the server from dist/ loading my CSS file but with wrong image paths, as it tries to fetch: http://localhost:9000/app/images/snickers/desktop/blue-free-750.jpg (notice app/).

So seems that Compass is getting it wrong. I'm using the great Compass image-url() helper to load images like:

background-image: image-url('snickers/desktop/blue-free-750.jpg');

Gruntfile Compass options are the defaults:

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
},

If i change imagesDir value to just 'images', it works when running grunt server:dist but then running grunt and opening from dist/ doesn't, fails to load the image again (file://localhost/Users/alejandro/Development/nike-free/images/snickers/desktop/blue-free-750.jpg).
Removing the image-url() helper from the source couldn't make it work running grunt, grunt server nor grunt server:dist.

Next is the output of my environment by running the command yo --version && echo $PATH $NODE_PATH && node -e 'console.log(process.platform, process.versions)' && cat Gruntfile.js:

1.0.0-beta.3
/Users/alejandro/.rvm/gems/ruby-1.9.3-p194/bin:/Users/alejandro/.rvm/gems/ruby-1.9.3-p194@global/bin:/Users/alejandro/.rvm/rubies/ruby-1.9.3-p194/bin:/Users/alejandro/.rvm/bin:/usr/local/bin:/usr/local/share/npm/bin:/usr/local/share/npm/lib:/Users/alejandro/.rvm/bin:/var/lib/gems/1.8/bin:/Users/alejandro/.gem/ruby/1.8/bin:/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/bin:/usr/X11/bin
darwin { http_parser: '1.0',
  node: '0.8.20',
  v8: '3.11.10.25',
  ares: '1.7.5-DEV',
  uv: '0.8',
  zlib: '1.2.3',
  openssl: '1.0.0f' }
// Generated on 2013-03-19 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: {
            compass: {
                files: ['<%= yeoman.app %>/styles/{,*/}*.{scss,sass}'],
                tasks: ['compass']
            },
            livereload: {
                files: [
                    '<%= yeoman.app %>/*.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']
                }
            }
        },
        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: {}
        },*/
        requirejs: {
            dist: {
                // Options: https://github.com/jrburke/r.js/blob/master/build/example.build.js
                options: {
                    // `name` and `out` is set by grunt-usemin
                    baseUrl: 'app/scripts',
                    optimize: 'none',
                    // TODO: Figure out how to make sourcemaps work with grunt-usemin
                    // https://github.com/yeoman/grunt-usemin/issues/30
                    //generateSourceMaps: true,
                    // required to support SourceMaps
                    // http://requirejs.org/docs/errors.html#sourcemapcomments
                    preserveLicenseComments: false,
                    useStrict: true,
                    wrap: true,
                    //uglify2: {} // https://github.com/mishoo/UglifyJS2
                }
            }
        },
        useminPrepare: {
            html: '<%= yeoman.app %>/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: '<%= yeoman.app %>',
                    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'
            }
        }
    });

    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',
            'compass:server',
            'livereload-start',
            'connect:livereload',
            'open',
            'watch'
        ]);
    });

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

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

    grunt.registerTask('default', [
        'jshint',
        'test',
        'build'
    ]);
};

JavaScript file not being included in dist on build

Node v0.10.7
Yeoman 1.0.0.-beta.5

I've installed an additional JS plugin (bootstrap-filestyle.js) to a project using Bower, but the file doesn't seem to ever get included in the dist dir.

So far I've tried referencing the file both inside the build concat block -

    <!-- build:js scripts/plugins.js -->
    <script src="bower_components/sass-bootstrap/js/bootstrap-affix.js"></script>
    <script src="bower_components/sass-bootstrap/js/bootstrap-alert.js"></script>
    <script src="bower_components/sass-bootstrap/js/bootstrap-dropdown.js"></script>
    <script src="bower_components/sass-bootstrap/js/bootstrap-tooltip.js"></script>
    <script src="bower_components/sass-bootstrap/js/bootstrap-modal.js"></script>
    <script src="bower_components/sass-bootstrap/js/bootstrap-transition.js"></script>
    <script src="bower_components/sass-bootstrap/js/bootstrap-button.js"></script>
    <script src="bower_components/sass-bootstrap/js/bootstrap-popover.js"></script>
    <script src="bower_components/sass-bootstrap/js/bootstrap-typeahead.js"></script>
    <script src="bower_components/sass-bootstrap/js/bootstrap-carousel.js"></script>
    <script src="bower_components/sass-bootstrap/js/bootstrap-scrollspy.js"></script>
    <script src="bower_components/sass-bootstrap/js/bootstrap-collapse.js"></script>
    <script src="bower_components/sass-bootstrap/js/bootstrap-tab.js"></script>
    <script src="bower_components/bootstrap-filestyle/src/bootstrap-filestyle.js"></script>
    <!-- endbuild -->

but on checking source, there's no reference within the concatenated plugins.js file.

When trying to include the file outside of the build block (by copying the JS file to the app/scripts dir), the file never gets included in my build.

Any ideas? Let me know if you need any more info!

Freshly generated site fails linting due to extra comma in main.js

The generator creates a main.js containing a trailing comma in the last entry of the require.config.paths, e.g.

paths: {
    jquery: '../bower_components/jquery/jquery',
}

This is not valid in older versions of IE, and jshint will flag it as an error, thus failing the task. Not hard to modify main.js to fix, but I don't think generated sites should fail linting even before they have been modified?

Issues with watch:livereload task

Edit

Please check out and test against this repository:
https://github.com/stephenplusplus/yo-webapp-livereload-test

We're mostly concerned with the files that require compilation (Sass files, Coffee files), so be sure to edit the heck out of those. Try to make the task fail in anyway possible, then let me know how it goes.


Here's how webapp currently generates the Gruntfile:

watch: {
    options: {
        nospawn: true
    },
    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:server']
    },
    livereload: {
        options: {
            livereload: LIVERELOAD_PORT
        },
        files: [
            '<%%= yeoman.app %>/*.html',
            '{.tmp,<%%= yeoman.app %>}/styles/{,*/}*.css',
            '{.tmp,<%%= yeoman.app %>}/scripts/{,*/}*.js',
            '<%%= yeoman.app %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}'
        ]
    }
}

Unless I remove nospawn: false, any files that require compiling won't trigger a reload. Specifically, if I try to save an edit to a CoffeeScript file, it will be compiled, but the browser won't reload.

Another solution that works for me:

watch: {
    options: {
        nospawn: true,
        livereload: LIVERELOAD_PORT // set as default for all tasks, which will share the same port
    },
    coffee: {
        files: ['<%= yeoman.app %>/scripts/{,*/}*.coffee'],
        tasks: ['coffee:dist']
    },
    coffeeTest: {
        options: {
            livereload: false // not sure if this is necessary
        },
        files: ['test/spec/{,*/}*.coffee'],
        tasks: ['coffee:test']
    },
    compass: {
        files: ['<%= yeoman.app %>/styles/{,*/}*.{scss,sass}'],
        tasks: ['compass:server']
    },
    html: {
        files: ['<%= yeoman.app %>/*.html']
    },
    css: {
        files: ['<%= yeoman.app %>/styles/{,*/}*.css']
    },
    images: {
        files: ['<%= yeoman.app %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}']
    }
}

The html, css, and images tasks could be joined under a single task as well, but to avoid confusion, this seemed straight forward.

If I'm the only one experiencing the issue in the first place, this proposal isn't necessary. However, if I'm not alone, and this looks more like what we were going for in the first place, this update might be necessary across the generators.

gen-webapp 0.2.3 on Mac OSX : Browser hanging forever

When I use yo webapp with current generator-webapp (0.2.3), and then run grunt server, server starts, but browser hangs forever trying to render localhost:9000.

While investigating, when I downgraded to generator-webapp (0.2.2) with npm -g install [email protected], and then re-scaffolded everything, it solved the problem.

Running on Mac OS X

Clean task does not remove dot files

  • Started with the files generated by webapp, I did a build
  • I removed the .htaccess, from my app folder and Gruntfile copy task config
  • After a build, .htaccess is still in the dist forder

Discussion: CoffeeScript workflow

I think the CoffeeScript support in this generator could be improved. The way it works at the moment is that all CoffeeScript is concatenated into a single main.js file during the build task while in server mode a coffee.js file is generated under .tmp/scripts/. This means that CoffeeScript files cannot be included in usemin blocks and the order in which CoffeeScript files are combined is solely defined by there filenames.

My desired workflow

I would prefer if CoffeeScript behaved like normal JavaScript files and is compiled by grunt behind the scenes, so it could be included in <script> tags just as any other .js file. In server mode, all that needs to be done is to tell the coffee grunt task to retain the original filenames:

coffee: {
    server: {
        files: [{
            expand: true,
            cwd: '<%= yeoman.app %>/scripts',
            src: '*.coffee',
            dest: '.tmp/scripts',
            ext: '.js'
        }]
    }, [...]
}

The server already serves files from .tmp/ if it can't find them in app/.

During build, *.coffee files in the app/ directory should replaced by their compiled .js counterparts. This would also require only minimal changes to the Gruntfile template. To allow usemin blocks to include CoffeeScript files, however, I believe the useminPrepare task would need to be extended for some search path option. That way we could specify to look for files in app/ first and in .tmp/ if it isn't found to mimic the server behavior.

Result

This way one could not only choose freely between JavaScript and CoffeeScript for all parts of the app, but also mix them without running into trouble.

generator-webapp issues with building on 1.0.0-beta.6

Yeoman: 1.0.0-beta.6

I'm having a couple of issues with the webapp-generator, generally the dist tasks seem to run fine, but follow up with an error message and requireJS seems to be search for the components directory which is now bower_components.

grunt
Running "jshint:all" (jshint) task

4 files lint free.

Running "clean:server" (clean) task
Cleaning ".tmp"...OK

Running "concurrent:test" (concurrent) task

Running "coffee:dist" (coffee) task

Running "coffee:test" (coffee) task

Done, without errors.
    Warning:  Use --force to continue.

    Aborted due to warnings.
mattgaunt@gauntface:~/Programming/Sites/conf/proto/mg-2$ grunt --force

Running "jshint:all" (jshint) task

4 files lint free.

Running "clean:server" (clean) task
Cleaning ".tmp"...OK

Running "concurrent:test" (concurrent) task

Running "coffee:dist" (coffee) task

Running "coffee:test" (coffee) task

Done, without errors.
    Warning:  Used --force, continuing.

Running "compass:dist" (compass) task
directory .tmp/styles/ 
    error app/styles/main.scss (Line 1: File to import not found or unreadable: sass-bootstrap/lib/bootstrap.
Load paths:
  <HOME_DIR>/Programming/Sites/conf/proto/mg-2/app/styles
  /var/lib/gems/1.9.1/gems/compass-0.12.2/frameworks/blueprint/stylesheets
  /var/lib/gems/1.9.1/gems/compass-0.12.2/frameworks/compass/stylesheets
  <HOME_DIR>/Programming/Sites/conf/proto/mg-2/app/bower_components
  Compass::SpriteImporter)
   create .tmp/styles/main.css 
Warning: Task "compass:dist" failed. Use --force to continue.

Aborted due to warnings.

Running "connect:test" (connect) task
Starting connect web server on localhost:9000.

Running "mocha:all" (mocha) task
Testing: http://localhost:9000/index.html

1 test complete (1 ms)

1 passed! (0.00s)

Running "clean:dist" (clean) task
Cleaning ".tmp"...OK
Cleaning "dist/404.html"...OK
Cleaning "dist/images"...OK
Cleaning "dist/index.html"...OK

Running "useminPrepare:html" (useminPrepare) task
Going through app/index.html to update the config
Looking for build script HTML comment blocks

Found a block:

<script src="components/modernizr/modernizr.js"></script>

Updating config with the following assets:
- app/components/modernizr/modernizr.js

Found a block:

<script data-main="scripts/main" src="components/requirejs/require.js"></script>

Updating config with the following assets:
- dist/scripts/main.js

Configuration is now:

cssmin:
{ dist:
{ files:
{ '<%= yeoman.dist %>/styles/main.css':
[ '.tmp/styles/{,/}.css',
'app/styles/{,/}.css' ] } } }

concat:
{ 'dist/scripts/vendor/modernizr.js': [ 'app/components/modernizr/modernizr.js' ],
'dist/scripts/main.js': [ 'dist/scripts/main.js' ] }

uglify:
{ 'dist/scripts/vendor/modernizr.js': 'dist/scripts/vendor/modernizr.js',
'dist/scripts/main.js': 'dist/scripts/main.js',
'dist/components/requirejs/require.js': 'app/components/requirejs/require.js' }

requirejs:
{ dist:
{ options:
{ baseUrl: 'app/scripts',
optimize: 'none',
preserveLicenseComments: false,
useStrict: true,
wrap: true,
name: 'main',
out: 'dist/scripts/main.js',
mainConfigFile: 'app/scripts/main.js' } } }

Running "concurrent:dist" (concurrent) task

Running "htmlmin:dist" (htmlmin) task
File dist/404.html created.
File dist/index.html created.

Done, without errors.

Running "svgmin:dist" (svgmin) task

Done, without errors.

Running "coffee:dist" (coffee) task

Running "coffee:test" (coffee) task

Done, without errors.

Running "imagemin:dist" (imagemin) task
✔ app/images/io_logo.jpg (saved 6.48Kb)
✔ app/images/info_icon.png (saved 3.45Kb)
✔ app/images/filter_icon.png (saved 1.63Kb)
✔ app/images/favorite_icon.png (saved 71.00B)
✔ app/images/search_icon.png (saved 2.05Kb)
✔ app/images/product_icons/track_android.png (saved 2.62KB)
✔ app/images/product_icons/track_techtalk.png (saved 7.52Kb)
✔ app/images/product_icons/track_youtube.png (saved 1.50KB)
✔ app/images/product_icons/track_chromeapps.png (saved 5.24KB)
✔ app/images/product_icons/track_googleplus.png (saved 3.69KB)
✔ app/images/product_icons/track_googlecloudplatform.png (saved 2.15KB)
✔ app/images/product_icons/track_knowledgestructureddata.png (saved 4.07KB)
✔ app/images/product_icons/track_googlewallet.png (saved 4.27KB)

Done, without errors.
    Warning:  Used --force, continuing.

Running "compass:dist" (compass) task
directory .tmp/styles/ 
    error app/styles/main.scss (Line 1: File to import not found or unreadable: sass-bootstrap/lib/bootstrap.
Load paths:
  <HOME_DIR>/Programming/Sites/conf/proto/mg-2/app/styles
  /var/lib/gems/1.9.1/gems/compass-0.12.2/frameworks/blueprint/stylesheets
  /var/lib/gems/1.9.1/gems/compass-0.12.2/frameworks/compass/stylesheets
  <HOME_DIR>/Programming/Sites/conf/proto/mg-2/app/bower_components
  Compass::SpriteImporter)
   create .tmp/styles/main.css 
Warning: Task "compass:dist" failed. Use --force to continue.

Aborted due to warnings.

Running "requirejs:dist" (requirejs) task

Tracing dependencies for: main
Error: ENOENT, no such file or directory '<HOME_DIR>/Programming/Sites/conf/proto/mg-2/app/components/jquery/jquery.js'
In module tree:
main

[Error: Error: ENOENT, no such file or directory '<HOME_DIR>/Programming/Sites/conf/proto/mg-2/app/components/jquery/jquery.js'
In module tree:
main

at Object.fs.openSync (fs.js:338:18)

]

Add an option to not automatically run npm and bower

Maybe we could add a configuration flag like --skip-install to optionally skip running npm and bower after the scaffolding is done.

We could utilize that when running the tests, so that not every test case spawns the two processes.

Drop RequireHM support

We are going to try adding in support for Traceur in the near future. As HM usage has been fairly low I think it would be more useful to devs if we dropped this question.

@sindresorhus have you already applied this locally? Happy to remove it from the generator if that helps.

generator always includes bootstrap.js?

16:15 ~/Code/apps/web (yeoman) $ yo webapp

 _-----_
|       |
|--(o)--|   .--------------------------.

---------´ | Welcome to Yeoman, | ( _´U_ ) | ladies and gentlemen! |
/_A\ '__________________________'
| ~ |
**'.
**.'__
´ |° ´ Y

Out of the box I include HTML5 Boilerplate, jQuery and Modernizr.
Would you like to include Twitter Bootstrap for Sass? (Y/n) n
Would you like to include RequireJS (for AMD support)? (Y/n) y
create Gruntfile.js
create package.json
create .gitignore
create .gitattributes
create .bowerrc
create component.json
create .jshintrc
create .editorconfig
create app/favicon.ico
create app/404.html
create app/robots.txt
create app/.htaccess
create app/scripts/vendor/bootstrap.js
create app/styles/main.css
create app/scripts/app.js
create app/index.html
create app/scripts/main.js
create app/scripts/hello.coffee
invoke mocha:app
create test/index.html
create test/lib/chai.js
create test/lib/expect.js
create test/lib/mocha/mocha.css
create test/lib/mocha/mocha.js
create test/spec/test.js

I'm all done. Just run npm install && bower install to install the required dependencies.

As you see in the log it creates app/scripts/vendor/bootstrap.js
Why is that? Since I answered "No" to bootstrap sass I would expect to skip the js too.

SCSS syntax error on default page (allo allo)

Following a fresh installation and clean caches:

Running "compass:server" (compass) task
directory .tmp/styles/ 
    error app/styles/main.scss (Line 247 of app/components/sass-bootstrap/lib/_mixins.scss: Invalid CSS after "...-shadow($shadow": expected ")", was "...) { ")
   create .tmp/styles/main.css 

image

Scripts in app/components can't be concatenated

(Not 100% sure if the bug is specific to this repo, let me know if I should move it.)

A friend at my office just told me this morning that his component scripts weren't being included in his concatenated output. He had a build block something like this:

<!-- build:js scripts/main.js -->
<script src="scripts/thing.js"></script>
<script src="components/jquery/jquery.js"></script>
<script src="components/something/else.js"></script>
<script src="scripts/main.js"></script>
<!-- endbuild -->

...but the resulting dist/scripts/main.js did not contain either of his components/**.js scripts. It was just the concatenated result of scripts/thing.js and scripts/main.js, with no jQuery or other components.

Verifying the bug

I couldn't replicate this on my existing project (which I made using yo webapp a few days ago). But then I updated yo, grunt, and bower and created a new project, and I was able to replicate the bug, on a yo webapp–generated project, right out of the box:

mkdir testgrunt && cd testgrunt
npm install -g yo grunt-cli bower
yo webapp
  # ('no' to Bootstrap for Sass)
  # ('no' to RequireJS)
npm install && bower install

All the above completed successfully. Had a look at the directory structure; all seemed correct. Then:

grunt

Here is the command output: https://gist.github.com/callumlocke/5089736 (It all looks correct.)

But my dist/scripts/main.js file contains only the following line:

console.log("'Allo 'Allo!");

It should contain jQuery before that line, because app/index.html contains this:

<!-- build:js scripts/main.js -->
<script src="components/jquery/jquery.js"></script>
<script src="scripts/main.js"></script>
<!-- endbuild -->

Workaround

I tried changing the name of the output file, like this:

<!-- build:js scripts/foo.js -->
<script src="components/jquery/jquery.js"></script>
<script src="scripts/main.js"></script>
<!-- endbuild -->

Now it works – when I run grunt, I get a complete dist/scripts/foo.js, consisting of jQuery followed by console.log("'Allo 'Allo!");.

Jade by default or flag?

Do enough people use jade to warrant install grunt-contrib-jade by default?
Or a tleast a flag to use it?

LiveReload snippet not being inserted

Here's what I did:

npm install -g yo grunt-cli bower
npm install generator-webapp
yo webapp
  # Bootstrap for Sass - YES
  # RequireJS - NO
  # (bower install & npm install completed successfully)
grunt server

But then when I edit app/index.html, Chrome doesn't refresh. When I view source, I can see there is no LR snippet.

This is an out-of-the-box yo webapp, generated straight after updating everything, and the Gruntfile.js looks normal (pasted here).

I just tried running grunt server on another project which I scaffolded a couple of weeks ago, and the LR middleware still works correctly on that one. The problem seems to be limited to all new projects I generate with yo webapp.

I'm not sure what to try next to troubleshoot this... Any suggestions?

Links to combined CSS files are not removed from the head

Multiple refs to css files are successfully combined, but the links to the originals are not removed, only the primary main.css

Not a big issue, but editing files to removed these missing links is surely not the point of build.

yeoman. 1.0.0-beta4
os. ox 10.8.3
node. v0.8.23

Add grunt-bower-install support

Using Yeoman pretty regularly one task I wish we automated better was wiring up your script tags when installing/removing components with Bower. This task by @stephenplusplus achieves this https://github.com/stephenplusplus/grunt-bower-install, however at present it has to use a namespace after grunt as follows: grunt bower-install:jquery.

If it's possible for us to bake this in somehow so that just running bower install jquery simply piped through to the above, that would be amazing. We could of course simply include the task without doing this but anything to lower how verbose the commands are would be great.

@paulirish @sindresorhus @passy

mocha tests being run twice.

My mocha tests are being run twice. I tried changing the mocha config in the gruntfile to have run:false

mocha: {
    all: {
        options: {
            run: false,
            urls: ['http://localhost:<%%= connect.options.port %>/index.html']
        }
    }
}

When I run the test task I get a timeout error

Warning: PhantomJS timed out, possibly due to a missing Mocha run() call. Use --force to continue.

but I can fix it by removing the call to mocha.run() in the test index.html.

Error in "coffee:dist" (coffee) task

Hi,

After run the command "grunt", returns this message:

Running "coffee:dist" (coffee) task
Warning: Errno::ENOENT on line ["33"] of C: No such file or directory - C:/P
rojetos/Yeoman/app/bower_components
Run with --trace to see the full backtrace Use --force to continue.

Aborted due to warnings.

But, when I'm the run with "-force", the project is successfully compiled.

How do fix the problem?

Thanks

Discussion: 5min+ build time and 122M of dependencies?

Feel free to close this at will, but this default yeoman generator is really heavy.

It takes more than 5 minutes to install with dependencies on good hardware and the node_modules directory (which, per guidelines, should be commited) weights a whopping 122M.

Would love to have feedback on this!

Default shim in main.js should also have conditionals around bootstrap code

Is there a reason the bootstrap shim code isn't surrounded by conditional statements? Otherwise, if I don't choose Compass Bootstrap files, I still get this useless shim.

This:

    paths: {
        jquery: '../bower_components/jquery/jquery'<% if (compassBootstrap) { %>,
        bootstrap: 'vendor/bootstrap'<% } %>
    },
    shim: {
        bootstrap: {
            deps: ['jquery'],
            exports: 'jquery'
        }
    }
});

Should be:

    paths: {
        jquery: '../bower_components/jquery/jquery'<% if (compassBootstrap) { %>,
        bootstrap: 'vendor/bootstrap'<% } %>
    },
   <% if (compassBootstrap) { %> shim: {
        bootstrap: {
            deps: ['jquery'],
            exports: 'jquery'
        }
    }<% } %>
});

Fails in Windows if .gitignore or .gitattributes exists

The generator fails when run in Windows Powershell if a .gitignore or .gitattributes file already exists. The generator asks you what you want to do (overwrite, skip, etc.) and tell you to use the arrow keys to select an option, but then immediately exits back to the command prompt.

yeoman 1.0 generator creates references to /vendor/ in index.html

Shouldn't the references be pointing to /components/ directory? I do see that the components.json list them as dependencies.

        <!--[if lt IE 7]>
            <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browseha
        <![endif]-->

        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="scripts/vendor/jquery.min.js"><\/script>')</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'));
        </script>

        <!-- build:js scripts/amd-app.js -->
        <script data-main="scripts/main" src="scripts/vendor/require.js"></script>

Files containing multi byte characters get served with wrong Content-Length on "grunt server"

A file like

<h1>Foo</h1>
<p>Multibyte characters here: ääää ööööö åååååå</p>

<p>Some html here</p>

The output gets truncated. I tried to isolate the problem with standalone "send"-module usage, standalone "connect"-module usage and standalone "grunt-contrib-connect" usage but didn't succeed so I guess it has to be something with the generated Gruntfile or something.

The most curious thing is, the Content-Length has wrong value only on GET requests. On HEAD it's the right one (bytesize by fs.stat).

Synchronize with usemin 2.0

usemin 2.0 is going to change:

  • some of it's options
  • requirejs in blocks is no more supported

We need to synchronize with this change (today the generated index.html and Gruntfile.js have for example requirejs blocks and the configuration to handle them)

Question: font-awesome and yeoman

Searching google for "font-awesome yeoman" offers up issues with integrating font-awesome and yeoman... but no solution or recommended integration method.

Could someone point me to a resource for integrating font-awesome into a vanilla yo webapp?

Thanks.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.