Merge branch 'develop'

* develop:
  bump version 1.2.5
  some small updates to the docs
  Adds support for the video poster attribute (#1123)
  babel-register use only for e2e tests (#1120)
  Update project creation: sort dependencies in package.json (#1118)
  Fix bug from PR #1082
  FIX: convert env variable PORT to a number.
  Minor refactoring of build scripts (#1082)
  ESLint config clean up (#1093)
  Switch to uglifyjs-webpack-plugin (#1119)
  change bad spaces into normal spaces and removing trailing space (#1132)
  prevent empty line when unit = y & e2e = n
  Update meta.js (#1091)
  docs(README): Update usage to init from develop branch (#1092)
  Use actual host for notification (#1101). (#1103)
  prevent webpack from injecting useless mocks

README.md

@@ -21,6 +21,14 @@ $ npm install
 $ npm run dev
 ```
 
+This will scaffold the project using the `master` branch. If you wish to use the latest version of the webpack template, do the following instead:
+
+``` bash
+$ vue init webpack#develop my-project
+```
+
+:warning: **The develop branch is not considered stable and can contain bugs or not build at all, so use at your own risk.**
+
 The development server will run on port 8080 by default. If that port is already in use on your machine, the next free port will be used.
 
 ## What's Included
@@ -33,7 +41,7 @@ The development server will run on port 8080 by default. If that port is already
   - Source maps
 
 - `npm run build`: Production ready build.
-  - JavaScript minified with [UglifyJS](https://github.com/mishoo/UglifyJS2).
+  - JavaScript minified with [UglifyJS v3](https://github.com/mishoo/UglifyJS2/tree/harmony).
   - HTML minified with [html-minifier](https://github.com/kangax/html-minifier).
   - CSS across all components extracted into a single file and minified with [cssnano](https://github.com/ben-eb/cssnano).
   - Static assets compiled with version hashes for efficient long-term caching, and an auto-generated production `index.html` with proper URLs to these generated assets.

docs/backend.md

@@ -10,17 +10,31 @@ Let's take a look at the default `config/index.js`:
 const path = require('path')
 
 module.exports = {
+  dev: {
+    / Paths
+    assetsSubDirectory: 'static',
+    assetsPublicPath: '/',
+    proxyTable: {},
+
+    // Various Dev Server settings
+    host: 'localhost',
+    port: 8080, 
+
+    // skipping other options as they are only convenience features
+  },
   build: {
-    index: path.resolve(__dirname, 'dist/index.html'),
-    assetsRoot: path.resolve(__dirname, 'dist'),
+    // Template for index.html
+    index: path.resolve(__dirname, '../dist/index.html'),
+
+    // Paths
+    assetsRoot: path.resolve(__dirname, '../dist'),
     assetsSubDirectory: 'static',
     assetsPublicPath: '/',
-    productionSourceMap: true
+
+    productionSourceMap: true,
+
+    // skipping the rest ...
   },
-  dev: {
-    port: 8080,
-    proxyTable: {}
-  }
 }
 ```
 

docs/commands.md

@@ -16,7 +16,7 @@ All build commands are executed via [NPM Scripts](https://docs.npmjs.com/misc/sc
 
 > Build assets for production. See [Integrating with Backend Framework](backend.md) for more details.
 
-- JavaScript minified with [UglifyJS](https://github.com/mishoo/UglifyJS2).
+- JavaScript minified with [UglifyJS v3](https://github.com/mishoo/UglifyJS2/tree/harmony).
 - HTML minified with [html-minifier](https://github.com/kangax/html-minifier).
 - CSS across all components extracted into a single file and minified with [cssnano](https://github.com/ben-eb/cssnano).
 - All static assets compiled with version hashes for efficient long-term caching, and a production `index.html` is auto-generated with proper URLs to these generated assets.
@@ -36,3 +36,7 @@ All build commands are executed via [NPM Scripts](https://docs.npmjs.com/misc/sc
 - Works with one command out of the box:
   - Selenium and chromedriver dependencies automatically handled.
   - Automatically spawns the Selenium server.
+
+### `npm run lint`
+
+> Runs eslint and reports any linting errors in your code. See [Linter Configuration](linter.md)

docs/linter.md

@@ -14,3 +14,14 @@ If you are not happy with the default linting rules, you have several options:
 2. Pick a different ESLint preset when generating the project, for example [eslint-config-airbnb](https://github.com/airbnb/javascript/tree/master/packages/eslint-config-airbnb).
 
 3. Pick "none" for ESLint preset when generating the project and define your own rules. See [ESLint documentation](https://eslint.org/docs/rules/) for more details.
+
+## Fixing Linting Errors
+
+You can run the following command to let eslint fix any errors it finds (if it can - not all errors are fixable like this):
+
+```
+npm run lint -- --fix
+```
+
+*(The `--` in the middle is necessary to ensure the `--fix` option is passdd to `eslint`, not to `npm`)*
+

docs/pre-processors.md

@@ -25,14 +25,18 @@ Once installed, you can use the pre-processors inside your `*.vue` components us
 
 ### PostCSS
 
-Styles in `*.vue` files are piped through PostCSS by default, so you don't need to use a specific loader for it. You can simply add PostCSS plugins you want to use in `build/webpack.base.conf.js` under the `vue` block:
+Styles in `*.vue` files and style files (`*.css`, `*.scss` etc) are piped through PostCSS by default, so you don't need to use a specific loader for it.
+
+You can simply add PostCSS plugins you want to use to the `.postcssrc.js`file in your project's root directory:
 
 ``` js
-// build/webpack.base.conf.js
+// https://github.com/michael-ciniawsky/postcss-load-config
+
 module.exports = {
-  // ...
-  vue: {
-    postcss: [/* your plugins */]
+  "plugins": {
+    // to edit target browsers: use "browserslist" field in package.json
+    "postcss-import": {},
+    "autoprefixer": {}
   }
 }
 ```

docs/structure.md

@@ -18,20 +18,25 @@
 ├── test/
 │   └── unit/                   # unit tests
 │   │   ├── specs/              # test spec files
-│   │   ├── setup.js            # file that runs before Jest tests
+│   │   ├── eslintrc            # config file for eslint with extra settings only for unit tests
 │   │   ├── index.js            # test build entry file
-│   │   └── karma.conf.js       # test runner config file
+│   │   ├── jest.conf.js        # Config file when using Jest for unit tests
+│   │   └── karma.conf.js       # test runner config file when using Karma for unit tests
+│   │   ├── setup.js            # file that runs before Jest runs your unit tests
 │   └── e2e/                    # e2e tests
 │   │   ├── specs/              # test spec files
 │   │   ├── custom-assertions/  # custom assertions for e2e tests
 │   │   ├── runner.js           # test runner script
 │   │   └── nightwatch.conf.js  # test runner config file
 ├── .babelrc                    # babel config
-├── .postcssrc.js               # postcss config
+├── .editorconfig               # indentation, spaces/tabs and similar settings for your editor
 ├── .eslintrc.js                # eslint config
-├── .editorconfig               # editor config
+├── .eslintignore.js            # eslint ignore rules
+├── .gitignore                  # sensible defaults for gitignore
+├── .postcssrc.js               # postcss config
 ├── index.html                  # index.html template
-└── package.json                # build scripts and dependencies
+├── package.json                # build scripts and dependencies
+└── README.md                   # Default README file
 ```
 
 ### `build/`

meta.js

@@ -1,3 +1,15 @@
+const path = require('path');
+const fs = require('fs');
+
+function sortObject(object) {
+  // Based on https://github.com/yarnpkg/yarn/blob/v1.3.2/src/config.js#L79-L85
+  const sortedObject = {};
+  Object.keys(object).sort().forEach(item => {
+    sortedObject[item] = object[item];
+  });
+  return sortedObject;
+}
+
 module.exports = {
   "helpers": {
     "if_or": function (v1, v2, options) {
@@ -72,7 +84,7 @@ module.exports = {
     },
     "unit": {
       "type": "confirm",
-      "message": "Setup unit tests"
+      "message": "Set up unit tests"
     },
     "runner": {
       "when": "unit",
@@ -115,5 +127,20 @@ module.exports = {
     "test/e2e/**/*": "e2e",
     "src/router/**/*": "router"
   },
-  "completeMessage": "To get started:\n\n  {{^inPlace}}cd {{destDirName}}\n  {{/inPlace}}npm install\n  npm run dev\n\nDocumentation can be found at https://vuejs-templates.github.io/webpack"
+  "complete": function (data) {
+    const packageJsonFile = path.join(
+      data.inPlace ? "" : data.destDirName,
+      "package.json"
+    );
+    const packageJson = JSON.parse(fs.readFileSync(packageJsonFile));
+    packageJson.devDependencies = sortObject(packageJson.devDependencies);
+    packageJson.dependencies = sortObject(packageJson.dependencies);
+    fs.writeFileSync(
+      packageJsonFile,
+      JSON.stringify(packageJson, null, 2) + "\n"
+    );
+
+    const message = `To get started:\n\n  ${data.inPlace ? '' : `cd ${data.destDirName}\n  `}npm install\n  npm run dev\n\nDocumentation can be found at https://vuejs-templates.github.io/webpack`;
+    console.log("\n" + message.split(/\r?\n/g).map(line => "   " + line).join("\n"));
+  }
 };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-cli-template-webpack",
-  "version": "1.2.4",
+  "version": "1.2.5",
   "license": "MIT",
   "description": "A full-featured Webpack setup with hot-reload, lint-on-save, unit testing & css extraction.",
   "scripts": {

template/.eslintrc.js

@@ -22,34 +22,32 @@ module.exports = {
   ],
   {{#if_eq lintConfig "airbnb"}}
   // check if imports actually resolve
-  'settings': {
+  settings: {
     'import/resolver': {
-      'webpack': {
-        'config': 'build/webpack.base.conf.js'
+      webpack: {
+        config: 'build/webpack.base.conf.js'
       }
     }
   },
   {{/if_eq}}
   // add your custom rules here
-  'rules': {
+  rules: {
     {{#if_eq lintConfig "standard"}}
-    // allow paren-less arrow functions
-    'arrow-parens': 0,
     // allow async-await
-    'generator-star-spacing': 0,
+    'generator-star-spacing': 'off',
     {{/if_eq}}
     {{#if_eq lintConfig "airbnb"}}
     // don't require .vue extension when importing
     'import/extensions': ['error', 'always', {
-      'js': 'never',
-      'vue': 'never'
+      js: 'never',
+      vue: 'never'
     }],
     // allow optionalDependencies
     'import/no-extraneous-dependencies': ['error', {
-      'optionalDependencies': ['test/unit/index.js']
+      optionalDependencies: ['test/unit/index.js']
     }],
     {{/if_eq}}
     // allow debugger during development
-    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
   }
 }

template/build/build.js

@@ -16,7 +16,7 @@ spinner.start()
 
 rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
   if (err) throw err
-  webpack(webpackConfig, function (err, stats) {
+  webpack(webpackConfig, (err, stats) => {
     spinner.stop()
     if (err) throw err
     process.stdout.write(stats.toString({

template/build/check-versions.js

@@ -3,6 +3,7 @@ const chalk = require('chalk')
 const semver = require('semver')
 const packageConfig = require('../package.json')
 const shell = require('shelljs')
+
 function exec (cmd) {
   return require('child_process').execSync(cmd).toString().trim()
 }
@@ -25,8 +26,10 @@ if (shell.which('npm')) {
 
 module.exports = function () {
   const warnings = []
+
   for (let i = 0; i < versionRequirements.length; i++) {
     const mod = versionRequirements[i]
+
     if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
       warnings.push(mod.name + ': ' +
         chalk.red(mod.currentVersion) + ' should be ' +
@@ -39,10 +42,12 @@ module.exports = function () {
     console.log('')
     console.log(chalk.yellow('To use this template, you must update following to modules:'))
     console.log()
+
     for (let i = 0; i < warnings.length; i++) {
       const warning = warnings[i]
       console.log('  ' + warning)
     }
+
     console.log()
     process.exit(1)
   }

template/build/utils.js

@@ -2,12 +2,13 @@
 const path = require('path')
 const config = require('../config')
 const ExtractTextPlugin = require('extract-text-webpack-plugin')
-const pkg = require('../package.json')
+const packageConfig = require('../package.json')
 
 exports.assetsPath = function (_path) {
   const assetsSubDirectory = process.env.NODE_ENV === 'production'
     ? config.build.assetsSubDirectory
     : config.dev.assetsSubDirectory
+
   return path.posix.join(assetsSubDirectory, _path)
 }
 
@@ -21,7 +22,7 @@ exports.cssLoaders = function (options) {
     }
   }
 
-  var postcssLoader = {
+  const postcssLoader = {
     loader: 'postcss-loader',
     options: {
       sourceMap: options.sourceMap
@@ -31,6 +32,7 @@ exports.cssLoaders = function (options) {
   // generate loader string to be used with extract text plugin
   function generateLoaders (loader, loaderOptions) {
     const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
+
     if (loader) {
       loaders.push({
         loader: loader + '-loader',
@@ -68,28 +70,29 @@ exports.cssLoaders = function (options) {
 exports.styleLoaders = function (options) {
   const output = []
   const loaders = exports.cssLoaders(options)
+
   for (const extension in loaders) {
     const loader = loaders[extension]
     output.push({
       test: new RegExp('\\.' + extension + '$'),
       use: loader
     })
   }
+
   return output
 }
 
-exports.createNotifierCallback = function () {
+exports.createNotifierCallback = () => {
   const notifier = require('node-notifier')
 
   return (severity, errors) => {
-    if (severity !== 'error') {
-      return
-    }
-    const error = errors[0]
+    if (severity !== 'error') return
 
+    const error = errors[0]
     const filename = error.file && error.file.split('!').pop()
+
     notifier.notify({
-      title: pkg.name,
+      title: packageConfig.name,
       message: severity + ': ' + error.name,
       subtitle: filename || '',
       icon: path.join(__dirname, 'logo.png')

template/build/vue-loader.conf.js

@@ -6,16 +6,15 @@ const sourceMapEnabled = isProduction
   ? config.build.productionSourceMap
   : config.dev.cssSourceMap
 
-
 module.exports = {
   loaders: utils.cssLoaders({
     sourceMap: sourceMapEnabled,
     extract: isProduction
   }),
   cssSourceMap: sourceMapEnabled,
-  cacheBusting: config.dev.cacheBusting, 
+  cacheBusting: config.dev.cacheBusting,
   transformToRequire: {
-    video: 'src',
+    video: ['src', 'poster'],
     source: 'src',
     img: 'src',
     image: 'xlink:href'