feat(docs): improve it

Author: jpatovh

README.md

@@ -18,18 +18,19 @@ This theme core is to be included in your main project and sets up many Gulp tas
 
 All is easily configurable by changing values in your `gulpfile.yml` file in your project. These values are merged into the `gulpfile.default.yml` file - look there for the available options and defaults.
 
+
+## Documentation
+
+Full documentation is available [here](https://drucker.readthedocs.io/en/latest).
+
+
 ### TODO
 
 - BrowserSync live reload and style injection (should be OK, not tested)
 - Images => Images optimization (to validate)
 - JS specs => JS tests using Karma
 
 
-## Documentation
-
-Full documentation is available [here](https://drucker.readthedocs.io/en/latest).
-
-
 ## Contributing
 
 Have a look at the [Contributing section](.github/CONTRIBUTING.md). If you have any question feel free to discuss about it on our [Gitter](https://gitter.im/ovh/ux).

docs/features/drupal-drush.md

@@ -12,6 +12,6 @@ Launch a Drupal command.
 
 ## Notes
 
-- If you want to use it with [Drucker](https://github.com/ovh-ux/drucker), you need to:
+If you want to use it with [Drucker](https://github.com/ovh-ux/drucker), you need to:
   - set the `config.drupal.dir` to `./path/to/drucker`
   - set the `config.drupal.command` to `. load-env && drush cc all`

docs/features/js.md

@@ -1,30 +1,12 @@
 Compiles JS files using Babel. You can optionaly concat, uglify, and add sourcemaps.
 
+!!! note ""
+    It's recommanded to use [Webpack](features/webpack.md) instead.
+
 ## Commands
 
 - `gulp js` - Compile all JS files using Babel
 - `gulp watch:js` - Watch and compile
 - `gulp validate:js` - Test JS with ESLINT
 - `gulp js:bundleBower` - (optional) compile, uglify, concat bower dependencies (result files will be `bower--*deps*.js`)
 - `gulp watch:bower` - (optional) Watch and compile bower deps
-
-
-# Webpack
-
-Manager your JS files using Webpack.
-
-## Usage
-
-Copy the `webpack.config.js` example file in your project.
-You can then configure the JS bundles that you want:
-```js
-  entry: {
-    main: path.resolve(__dirname, './js/main.js')
-    [...]
-  },
-```
-
-## Commands
-
-- `gulp webpack` - Launch Webpack compilation
-- `gulp watch:webpack` - Watch and compile

docs/features/webpack.md

@@ -0,0 +1,17 @@
+Manage your JS files using Webpack.
+
+## Usage
+
+Copy the `webpack.config.js` example file in your project.
+You can then configure the JS bundles that you want:
+```js
+  entry: {
+    main: path.resolve(__dirname, './js/main.js')
+    [...]
+  },
+```
+
+## Commands
+
+- `gulp webpack` - Launch Webpack compilation
+- `gulp watch:webpack` - Watch and compile

docs/index.md

@@ -16,12 +16,6 @@ This theme core is to be included in your main project and sets up many Gulp tas
 
 All is easily configurable by changing values in your `gulpfile.yml` file in your project. These values are merged into the `gulpfile.default.yml` file - look there for the available options and defaults.
 
-### TODO
-
-- BrowserSync live reload and style injection (should be OK, not tested)
-- Images => Images optimization (to validate)
-- JS specs => JS tests using Karma
-
 
 ## Prerequisites
 
@@ -31,66 +25,26 @@ All is easily configurable by changing values in your `gulpfile.yml` file in you
 
 ## Installation
 
-- `npm install gulp-drupal-theme-core --save-dev`
-- Create a `gulpfile.yml` in your theme, and overrides options from the `gulpfile.default.yml`
-- Make a `gulpfile.js` in your project, with:
-```js
-    "use strict";
-
-    const gulp = require("gulp");
-    const yaml = require("js-yaml");
-    const fs = require("fs");
-
-    // `rc` allows all config options to be overridden with CLI flags like `--js.enabled="` or in `~/.p2-theme-corerc` files, among many others: https://www.npmjs.com/package/rc
-    const config = require("rc")("gulp-drupal-theme-core", yaml.safeLoad(fs.readFileSync(`${__dirname}/gulpfile.yml`, "utf8"), { json: true }));
-    const themeCore = require("gulp-drupal-theme-core");
-
-    const tasks = {
-        compile: [],
-        watch: [],
-        validate: [],
-        clean: [],
-        "default": []
-    };
-
-    themeCore(gulp, config, tasks);
-
-    gulp.task("clean", gulp.parallel(tasks.clean));
-    gulp.task("compile", gulp.series(
-        "clean",
-        gulp.series(tasks.compile)
-    ));
-    gulp.task("validate", gulp.parallel(tasks.validate));
-    gulp.task("watch", gulp.parallel(tasks.watch));
-    tasks.default.push("watch");
-    gulp.task("default", gulp.series(
-        "compile",
-        gulp.parallel(tasks.default)
-    ));
+Follow theses steps:
+
+```bash
+$ cd <your-theme>
+# Install it
+$ npm install gulp-drupal-theme-core --save-dev
+# Create a gulpfile.js
+$ cp node_modules/gulp-drupal-theme-core/templates/gulpfile.js ./
+# Create a gulpfile.yml (config file)
+$ vi gulpfile.yml
+# <set the config that you want, and save it>
 ```
 
-### Babel
-In order to use Babel, you need to create a `.babelrc` into your project, with the presets that you want installed.
-
-### ESLINT
-You need to create a `.eslintrc.js` file, and specify whitch rules that you want (`eslint-config-ovh` is recommanded).
+!!! note ""
+    See the [Config](config.yml) section for the documentation about the configuration file.
 
 
 ## Usage
 
-### Global Commands
-
-- `gulp` - Run all compile tasks, and watch for changes
-- `gulp compile` - Run all compile tasks
-- `gulp validate` - Run all validate tasks (eslint, ...)
-- `gulp watch` - Watch for changes
-- `gulp clean` - Run all clean tasks
-
-### Specifics Commands
-
-You can launch specifics tasks, for example "lint CSS files". In this example, you can use `gulp validate:css`.
-
-All the documentation can be found inside the [Features](features) section.
+See [Usage](usage.md) section.
 
 
 ## Credits

docs/usage.md

@@ -0,0 +1,76 @@
+## Commands
+
+- `gulp` - Run all compile tasks, and watch for changes
+- `gulp compile` - Run all compile tasks
+- `gulp validate` - Run all validate tasks (eslint, ...)
+- `gulp watch` - Watch for changes
+- `gulp clean` - Run all clean tasks
+
+## Specifics Commands
+
+You can launch specifics tasks, for example "lint CSS files". In this example, you can use `gulp validate:css`.
+
+All the documentation can be found inside the [Features](features) section.
+
+
+### Babel
+
+In order to use Babel, you need to create a `.babelrc` into your project, with the presets that you want installed.
+
+**Example:**
+Run: 
+```bash
+$ npm install --save-dev babel-preset-es2015
+```
+And create a `.babelrc` file:
+```json
+{
+  "presets": ["es2015"]
+}
+```
+
+### ESLINT
+
+You need to create a `.eslintrc.js` file, and specify whitch rules that you want (`eslint-config-ovh` is recommanded).
+
+**Example:**
+Run: 
+```bash
+$ npm install --save-dev babel-eslint
+$ npm install --save-dev eslint-config-ovh
+```
+And create a `.eslintrc.js` file:
+```javascript
+"use strict";
+// rule reference: http://eslint.org/docs/rules
+// individual rule reference: http://eslint.org/docs/rules/NAME-OF-RULE
+
+module.exports = {
+    extends: "ovh/configs/es6-browser",
+    globals: {
+        Drupal: true,
+        jQuery: true,
+        _: true,
+        domready: true
+    }
+};
+```
+
+### STYLELINT
+
+You need to create a `.stylelintrc.js` file, and specify whitch rules that you want (`stylelint-config-ovh` is recommanded).
+
+**Example:**
+Run: 
+```bash
+$ npm install --save-dev stylelint-scss
+$ npm install --save-dev stylelint-config-ovh
+```
+And create a `.stylelintrc.js` file:
+```javascript
+"use strict";
+
+module.exports = {
+    "extends": "stylelint-config-ovh/configs/scss"
+};
+```

mkdocs.yml

@@ -3,9 +3,11 @@ docs_dir: docs
 
 pages:
   - Home: index.md
+  - Usage: usage.md
   - Features:
     - CSS: features/css.md
     - JS: features/js.md
+    - Webpack: features/webpack.md
     - Icons: features/icons.md
     - Drupal-Drush: features/drupal-drush.md
     - BrowserSync: features/browser-sync.md