Fixes #221

After messing up my last PR i feel abit embarrassed with my lack of knowledge of git, but here is everything compressed in to a single commit like was originally asked, sorry for messing you all around.

CC @sindresorhus

I ran these commands: cd ~/myproject yeoman init bbb

The app and test directories were placed in my home directory ~ and not in the current directory myproject.

I'm not sure whether this was done intentionally, but the sprite images and the fonts for font-awesome don't seem to be included with the sass twitter bootstrap.

I'ts not a big deal, and i could have just installed the compass bootstrap gem, but I've just gone to use sprites in a project and noticed the file is still referencing the original img path:

../img/glyphicons-halflings.png

It'd be real sweet if these sprites, and the font awesome counterpart came bundled with the project if opted in during the init sequence.

I've generated a project using yeoman, and I have the following scss file which references an image using relative paths:

.compare {
  background-image: url("../img/insulin-v2.jpg");
}

However, it does not get properly converted to the correct ../img/[random-hash].insulin-v2.jpg format.

If I change it to an absolute path, it does convert it correctly, ie,

.compare {
  background-image: url("/img/insulin-v2.jpg");
}

...generates this in the yeoman build output

Running "usemin:css" (usemin) task

usemin:css - styles/4dcce6a3.styles.css
>> img/insulin-v2.jpg
was url("/img/insulin-v2.jpg")
now url("/img/46ee3ef4.insulin-v2.jpg")

(the previous relative url version doesn't produce any output after Running "usemin:css" (usemin) task)

I can't use absolute paths because I need to host somewhere where it is not the root directory. Any ideas?

My folder structure is

./app:
    index.html
./app/img
    insulin-v2.jpg
./app/sass:
    _grid.scss
    _normalize.scss 
    styles.scss

Gruntfile.js build settings are

// Build configuration
// -------------------

// the staging directory used during the process
staging: 'temp',
// final build output
output: 'dist',

mkdirs: {
  staging: 'app/'
},

// Below, all paths are relative to the staging directory, which is a copy
// of the app/ directory. Any .gitignore, .ignore and .buildignore file
// that might appear in the app/ tree are used to ignore these values
// during the copy process.

// concat style/**/*.css files, inline @import, output a single minified css
css: {
  'styles/styles.css': ['styles/**/*.css']
},

// renames JS/CSS to prepend a hash of their contents for easier
// versioning
rev: {
  js: 'scripts/**/*.js',
  css: 'styles/**/*.css',
  img: 'img/**'
},

// usemin handler should point to the file containing
// the usemin blocks to be parsed
'usemin-handler': {
  html: 'index.html'
},

// update references in HTML/CSS to revved files
usemin: {
  html: ['**/*.html'],
  css: ['**/*.css']
},

// HTML minification
html: {
  files: ['**/*.html']
},

// Optimizes JPGs and PNGs (with jpegtran & optipng)
img: {
  dist: '<config:rev.img>'
},

// rjs configuration. You don't necessarily need to specify the typical
// `path` configuration, the rjs task will parse these values from your
// main module, using http://requirejs.org/docs/optimization.html#mainConfigFile
//
// name / out / mainConfig file should be used. You can let it blank if
// you're using usemin-handler to parse rjs config from markup (default
// setup)
rjs: {
  // no minification, is done by the min task
  optimize: 'none',
  baseUrl: './scripts',
  wrap: true,
  name: 'main'
}

This could be related to #419, but I tried the .compass.rb file addition and the relative_assets: true, but they both didn't work.

A new streaming build system which tries to offer a build pipeline alternative to Grunt. Has some nice advantages like being faster and requiring a lot less configuration (both in terms of the Gulp file (Gruntfile equiv)) and during task writing.

I don't think it's perfect, but may be worth a look just to be aware of what is being worked on.

• http://slid.es/contra/gulp
• https://github.com/wearefractal/gulp

From Addy: Thanks for your interest in the Yeoman docs sprint. We're hoping to spend Wednesday 30th writing lots of shiny new docs for Yeoman and hope you'll join us. Docs are a fantastic way to brush up your skills on a tool and we'll all be in the #yeoman channel on freenode if you need any help. Let us know if you would like to take part.

Sindre: Here is what we need to document for 1.0. Fill in when you find anything.

• [x] How to switch to use grunt and bower directly. Need to mention users have to do npm install -g grunt-cli bower.
• [ ] How to get pushState to work. Either route all traffic to index.html or set up patterns. Using grunt-contrib-connect together with middleware. (https://github.com/yeoman/yeoman/pull/670#issuecomment-12332263)
• [ ] How to use PHP with Yeoman. Lot's of requests for this. We could show of simple it is. (https://github.com/yeoman/yeoman/pull/270#issuecomment-10150543)
• [x] How to use Express with Yeoman.
• [x] How the install command works, and where packages are fetched from and how the users gets them there. Ref https://github.com/yeoman/yeoman/issues/861#issuecomment-12509790
• [x] An updated guide on how to write your own generator (#761)
• [ ] How do you get Handlebars and erb templates working with Yeoman?
• [x] GitHub pages and Yeoman workflow (#850)
• [ ] How does Grunt relate to Yeoman? (#435)
• [x] Road to 1.0 and other changes since 0.9 (#775)
• [x] Documentation for Generators (e.g AngularJS)
• [ ] How to get Yeoman working with Bootstrap for LESS
• [x] Upgrade guide to 1.0. What kind of changes users has to do.
• [ ] How to use Jade, Handlebars.js, LESS, etc with Yeoman.

@tomlane

Okay let's use this ticket to gang up on the new installer. :D

Just ran the latest on my own OS X machine which has most of this stuff already. Only one issue stood out:

Looks like you need to sudo your npm install:

sdlkf  

This was the weirdest moment. It asked me to sudo and it was a random plaintext entry. Typed gobbledygook and seemingly got through.

I then ran into a bunch of permission errors for the rm -r ~/.yeoman call, but that's less of a worry.

cc @sindresorhus

Seeking feedback.

We want to create a mobile-first scaffolding solution for Yeoman that helps web app developers quickly kickstart projects with sane defaults.

Some of the problems we felt would be useful to address are:

• Selection of a UI framework with a mobile-first grid system and sane default breakpoints
• Boilerplate scaffolding of a basic RWD layout so you can just start coding
• Conditional inclusion of FastClick to avoid touch event delays (where needed)
• Appcache manifest generation
• A solution for high DPI images as part of your build process
  • Option 1: Developers always provide highest resolution assets. Build step to resize the image to correct sizes for display densitites and apply correct src-set attribute to the image <img src="highest.png" src-set="1x highest.1x.png 1.6x highest.1.6x.png">
  • Option 2: Super-compression on a 2-3x density image that is resized, however this comes with a performance hit in the browser when it comes to resizing
• Recommendations of an abstraction library to work with offline storage based on what is supported
• Prompt to include a minimalist DOM manipulation library (jQuery minimal or Zepto)
• Potentially having a solution for layout/rendering testing
• Single-command access to device testing in the cloud with BrowserStack or Sauce Labs.
  • BrowserStack also has a screenshot service, but unsure if it's exposed via their API.
• Maybe automate the creation and testing on mobile emulators (e.g Create the configurations required (if adb is installed) to create a suite of emulators you can test on with the correct configurations for a range of devices...)

Here is what the prompts workflow for this might look like:

$ yo mobile

> Would you like to use Twitter Bootstrap 3.0 pre, PureCSS or TopCoat? (y/n)
Y

> Would you like to include layout boilerplate for this framework? (y/n)
Y

> For DOM manipulation, include jQuery (minimal), Zepto or no library? Enter choice.
jquery

> Conditionally include the FastClick library when needed? (y/n)
n

> Generate an Application cache manifest for the project? (y/n)
Y

> Super-compress high-resolution images during build for Hi-Dpi needs? (y/n)
y

> Include a helper library for delegating what to use for offline storage? (y/n)
y

> Include boilerplate for using the Fullscreen API? (y/n)
n

> Use BrowserStack, SauceLabs or none for your cloud device-testing needs? (y/n)
browserstack

# you would then later use this via `grunt preview nexus7` etc.

We're interested in getting feedback on what could be improved with this proposed workflow.

Are we giving users too many options? Are there any problems we're not yet considering?

Yeoman insight is collecting some information on how people (that are opted in) use Yeoman: http://yeoman.io/insight.html

We're trying to find a nice way to share this data. Unfortunately there is no way to add a google group to having viewing permissions on the analytics account.

The answer is likely making a small webapp to report via the Analytics Core Reporting API. As for requirements for the app, we can extract some ideas from the insight document:

• what libraries are people adding to their project?
• what boilerplates are being used to kick off a project
• report count of users doing each sort of activity (download, init, server, build) for given timeranges.
  • crossfilter perhaps?
• usage recency
• how long for users to upgrade to latest version?
• can we detect any usage that indicates trouble areas like poor API design?

We can start small.

( for a quick view of the data we've collected so far, here you go. )

We'd love help on this one. Comment below if you'd like to work on the development of this. I'll get you added to the analytics account so you can start exploring.

Following discussions with @paulirish it has been decided that the installation script in it's current form (install.sh) with all the tweaks for different systems will not be sustainable.

We have therefore started drafting ideas on how to ensure the installation is kept as easy and as lightweight as possible.

• Create a script that will audit the user's system, show them what they have setup and what they need to do if there are any unmet dependencies.
• Provide documentation on how to prepare the dependencies for Yeoman manually.
• Create a new repo (which I would be happy to maintain) with scripts for specific systems and linux distros (so users have the choice of an automated install).

We'd really like all your thoughts on this :)

I can't seem to install yeoman at all, every time I run npm install -g yeoman (note: changed user permissions so I don't have to run sudo) I keep getting the following output:

npm http GET https://registry.npmjs.org/yeoman npm http 200 https://registry.npmjs.org/yeoman npm http GET https://registry.npmjs.org/yeoman/-/yeoman-0.9.4.tgz npm http 200 https://registry.npmjs.org/yeoman/-/yeoman-0.9.4.tgz npm http GET http://nodeload.github.com/gruntjs/grunt/tarball/0ba6d4b529 npm http GET http://nodeload.github.com/yeoman/generators/tarball/3d709c61cd npm http GET https://registry.npmjs.org/bower npm http GET https://registry.npmjs.org/open/0.0.2 npm http GET https://registry.npmjs.org/rimraf npm http GET https://registry.npmjs.org/mkdirp npm http GET https://registry.npmjs.org/requirejs npm http GET https://registry.npmjs.org/clean-css npm http GET https://registry.npmjs.org/connect npm http GET https://registry.npmjs.org/html-minifier npm http GET https://registry.npmjs.org/which npm http GET https://registry.npmjs.org/request npm http GET https://registry.npmjs.org/fstream npm http GET https://registry.npmjs.org/fstream-ignore/0.0.5 npm http GET https://registry.npmjs.org/cheerio npm http GET https://registry.npmjs.org/tar npm http GET https://registry.npmjs.org/coffee-script npm http GET https://registry.npmjs.org/grunt-jasmine-task npm http GET https://registry.npmjs.org/faye-websocket npm http GET https://registry.npmjs.org/shelljs npm http GET https://registry.npmjs.org/prompt npm http GET https://registry.npmjs.org/colors npm http GET https://registry.npmjs.org/grunt-mocha npm http GET https://registry.npmjs.org/es6-collections npm http GET https://registry.npmjs.org/grunt-contrib-coffee npm http 404 http://nodeload.github.com/gruntjs/grunt/tarball/0ba6d4b529 npm ERR! fetch failed http://nodeload.github.com/gruntjs/grunt/tarball/0ba6d4b529 npm http 404 http://nodeload.github.com/yeoman/generators/tarball/3d709c61cd npm ERR! fetch failed http://nodeload.github.com/yeoman/generators/tarball/3d709c61cd npm ERR! Error: 404 Not Found npm ERR! at null. (/usr/local/lib/node_modules/npm/lib/utils/fetch.js:47:16) npm ERR! at EventEmitter.emit (events.js:123:20) npm ERR! at WriteStream.flush (fs.js:1517:12) npm ERR! at fs.close (/usr/local/lib/node_modules/npm/node_modules/graceful-fs/graceful-fs.js:90:5) npm ERR! at Object.oncomplete (fs.js:297:15) npm ERR! If you need help, you may report this log at: npm ERR! http://github.com/isaacs/npm/issues npm ERR! or email it to: npm ERR! [email protected]

npm ERR! System Darwin 11.4.2 npm ERR! command "node" "/usr/local/bin/npm" "install" "-g" "yeoman" npm ERR! cwd /Users/david/Sites/Node npm ERR! node -v v0.8.12 npm ERR! npm -v 1.1.65 npm http 304 https://registry.npmjs.org/bower npm http 304 https://registry.npmjs.org/open/0.0.2 npm http 304 https://registry.npmjs.org/rimraf npm http 304 https://registry.npmjs.org/requirejs npm http 304 https://registry.npmjs.org/mkdirp npm http 304 https://registry.npmjs.org/clean-css npm http 304 https://registry.npmjs.org/connect npm http 304 https://registry.npmjs.org/html-minifier npm http 304 https://registry.npmjs.org/which npm http 304 https://registry.npmjs.org/request npm WARN package.json [email protected] No README.md file found! npm http 304 https://registry.npmjs.org/fstream npm http 304 https://registry.npmjs.org/fstream-ignore/0.0.5 npm http 304 https://registry.npmjs.org/cheerio npm http 304 https://registry.npmjs.org/tar npm http 304 https://registry.npmjs.org/coffee-script npm http 304 https://registry.npmjs.org/grunt-jasmine-task npm http 304 https://registry.npmjs.org/faye-websocket npm http 304 https://registry.npmjs.org/shelljs npm http 304 https://registry.npmjs.org/prompt npm http 304 https://registry.npmjs.org/colors npm http 304 https://registry.npmjs.org/grunt-mocha npm http 304 https://registry.npmjs.org/es6-collections npm http 304 https://registry.npmjs.org/grunt-contrib-coffee npm ERR! npm ERR! Additional logging details can be found in: npm ERR! /Users/david/Sites/Node/npm-debug.log npm ERR! not ok code 0

I've followed the uninstallation instructions on this page https://github.com/yeoman/yeoman/wiki/Additional-FAQ but still get the same output.

I got stuck with an IE11-compatible issue. here is it:

I check the taskpane.js file find it still using deconstruct expression which is from ES6.

after that, I checked the webpack.config.js file. I google it, so the babel-loader should be used to convert ES6 to ES5. here is the file:

/* eslint-disable no-undef */

const devCerts = require("office-addin-dev-certs");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const webpack = require("webpack");

const urlDev = "https://localhost:3000/";
const urlProd = "xxxxx"; // CHANGE THIS TO YOUR PRODUCTION DEPLOYMENT LOCATION

async function getHttpsOptions() {
  const httpsOptions = await devCerts.getHttpsServerOptions();
  return { cacert: httpsOptions.ca, key: httpsOptions.key, cert: httpsOptions.cert };
}

module.exports = async (env, options) => {
  const dev = options.mode === "development";
  const config = {
    devtool: "source-map",
    entry: {
      polyfill: ["core-js/stable", "regenerator-runtime/runtime"],
      vendor: ["react", "react-dom", "core-js", "@fluentui/react"],
      taskpane: ["react-hot-loader/patch", "./src/taskpane/index.js"],
      commands: "./src/commands/commands.js",
    },
    output: {
      clean: true,
    },
    resolve: {
      extensions: [".ts", ".tsx", ".html", ".js"],
    },
    module: {
      rules: [
        {
          test: /\.jsx?$/,
          use: [
            "react-hot-loader/webpack",
            {
              loader: "babel-loader",
              options: {
                presets: ["@babel/preset-env"],
              },
            },
          ],
          exclude: /node_modules/,
        },
        {
          test: /\.html$/,
          exclude: /node_modules/,
          use: "html-loader",
        },
        {
          test: /\.(png|jpg|jpeg|gif|ico|svg)$/,
          type: "asset/resource",
          generator: {
            filename: "assets/[name][ext][query]",
          },
        },
        {
          test: /\.css$/,
          use: ["style-loader", "css-loader"],
        },
        {
          test: /\.scss$/,
          use: ["style-loader", "css-loader", "sass-loader"],
        },
      ],
    },
    plugins: [
      new CopyWebpackPlugin({
        patterns: [
          {
            from: "assets/*",
            to: "assets/[name][ext][query]",
          },
          {
            from: "manifest*.xml",
            to: "[name]" + "[ext]",
            transform(content) {
              if (dev) {
                return content;
              } else {
                return content.toString().replace(new RegExp(urlDev, "g"), urlProd);
              }
            },
          },
        ],
      }),
      new HtmlWebpackPlugin({
        filename: "taskpane.html",
        template: "./src/taskpane/taskpane.html",
        chunks: ["taskpane", "vendor", "polyfill"],
      }),
      new HtmlWebpackPlugin({
        filename: "commands.html",
        template: "./src/commands/commands.html",
        chunks: ["commands"],
      }),
      new webpack.ProvidePlugin({
        Promise: ["es6-promise", "Promise"],
      }),
      new webpack.ProvidePlugin({
        "React": "react",
      }),
    ],
    devServer: {
      hot: true,
      headers: {
        "Access-Control-Allow-Origin": "*",
      },
      https: env.WEBPACK_BUILD || options.https !== undefined ? options.https : await getHttpsOptions(),
      port: process.env.npm_package_config_dev_server_port || 3000,
    },
  };

  return config;
};

I found it works in my code but not the library. before:

after:

So what am I supposed to do to convert the library code?

There are some inconsistencies between the version 5.x API and the instructions at https://yeoman.io/authoring

For example: this.npmInstall() does not work and there is no such method in the API.

Sorry for my english, I speak in spanish.

For example, if there is a list prompt without mandatory: true but with any other validation the "Mandatory field" message always shows up for a few seconds before the desired validation message

I'm writing some subgenerators and one requirement is to rename the output files based on the subgenerator name, for instance:

generators
      |__ app
      |      |__ templates
      |                |__ myFile
      |__ gen1
      |      |__ templates
      |                |__ myFile
      |__ gen2
            |__ templates
                      |__ myFile

Considering here that 'app' is composed with 'gen1' and 'gen2'. So both will write at my output and I need something like that:

myFile.app
myFile.gen1
myFile.gen2

I know that generators can access 'appname' to get top-level generator name, but what about the subgenerator name? There is any way to get the subgenerator name programmatically at runtime?

Anyone can help me out with this?

I have created one generator with "yo" and It's working as expected. But, I need one additional step needs to be done before the yeoman starts.

When executing yo codegen

1. The express server will start and it opens one authentication portal
2. Once authentication is done, I will receive some token
3. Now Express server should stop and based on authentication status my generator will resume the task.
4. After the generation task, the .yo-rc.json data will send to some external system (using REST call) with the help of the received token.
5. This will help us, to monitor end-users input

Now problem is, the up to token receive part is ok. But, the express server did not stop, and when I press ctrl+c the Yemon got excited.