frontend / generator-toolbox Goto Github PK

Shrinkwrap ?

Generate a npm-shrinkwrap.json file to lock down all modules versions (see doc).

Add a .npmrc too, to force saving the exact version of the module:

save-exact=true

Allow the generator to create separated (un-concatenated) files.

It's useful for Drupal for example, using a core jQuery, we need a separated file for the styleguide.
Or for CKeditor of Drupal, avoid using same all css for CKeditor.

• Single vendors
• Single Styles
• Single Scripts

4.0.0-alpha.5 instead of v4-dev

Currently, all @import paths in bootstrap.scss are set to ../../node_modules/…

This makes the gulp task styles crash without any error logged when the assets/ folder is not at the root of the project (i.e. in a Drupal or WP theme). We need to dynamically generate the right path with the right number of ../ 😉

Why ?

Because I don't want to compile phantomjs or browser-sync for preparing production build.

How ?

npm install --production

should be just enough to run gulp build

Source: paularmstrong/swig@70a1c88

A fork exists: https://github.com/node-swig/swig-templates

We should maybe find another template engine! (compatible with consolidate.js)

Add the Tasks and the necessary lines on :

AngularJS

Server.js

    gulp.watch([config.assets + 'app/**/*.js'], function() {
      runSequence('angular', 'metalsmith', reload);
    });

Vendors.js

 /*
  * Angular Vendors
  */
  gulp.task('angular-vendors', function() {
    return gulp.src(config.vendors.angular)
    .pipe($.concat('angular-vendors.min.js'))
    .pipe($.uglify())
    .pipe($.size({title: 'ANGULAR VENDORS', showFiles: true}))
    .pipe(gulp.dest(config.build + 'js'));
  });

  /*
  * Build vendors dependencies
  */
  gulp.task('vendors', function() {
    return gulp.start('css-vendors', 'js-vendors', 'angular-vendors', 'fonts-vendors', 'polyfills-vendors');
  });

gulp_config.json

  "vendors": {
    "js": [
    ],
    "angular": [
      "node_modules/ng-file-upload/dist/ng-file-upload-shim.js",
      "node_modules/ng-file-upload/dist/ng-file-upload.js"
    ],

Ionic

package.json

  "cordovaPlugins": [
    "cordova-plugin-device",
    "cordova-plugin-console",
    "cordova-plugin-whitelist",
    "cordova-plugin-splashscreen",
    "cordova-plugin-statusbar",
    "ionic-plugin-keyboard"
  ],

.gitignore

platforms/
plugins/
/www/build

<icon> vanilla JS web component ?

../

like bootstrap.scss

https://github.com/nfroidure/gulp-iconfont

To simply add a component's variant

When on gh-pages, the styleguide is in a sub-folder. All paths written as /build/css/... are then completely wrong. I suggest building the styleguide in a sufolder from the start in styleguide/repo-name/. We need to update the generating tasks accordingly. 😉

And remember that Github is case-sensitive.

We usually already have optmized images.

See report of slow-deps: #29 (comment)

gulp-webpack

• Externalize ?
• Stylelint config standard ?
• Eslint Airbnb ?
• Fail git push hook 😈
• Config Dev/Prod ± permissive

:)

Find a better way to document the component's variable to not contaminated the markup and drop useless usage and options

Currently the .gitignore file is set to ignore /build, so it doesn't work when setting a custom build path at the setup.

• preview background color
• wrapper

I'm getting this error when I'm tying to run yo toolbox

module.js:341
    throw err;
    ^

Error: Cannot find module 'unicode/category/So'
    at Function.Module._resolveFilename (module.js:339:15)
    at Function.Module._load (module.js:290:25)
    at Module.require (module.js:367:17)
    at require (internal/module.js:16:19)
    at symbols (/usr/lib/node_modules/generator-toolbox/node_modules/slug/slug.js:6:16)
    at /usr/lib/node_modules/generator-toolbox/node_modules/slug/slug.js:199:5
    at Object.<anonymous> (/usr/lib/node_modules/generator-toolbox/node_modules/slug/slug.js:212:2)
    at Module._compile (module.js:413:34)
    at Object.Module._extensions..js (module.js:422:10)
    at Module.load (module.js:357:32)

Any ideas?

Thanks

Some the default dependencies package require to build something with python.
Do you think we can avoid this dependency ?

$ npm install

> [email protected] install C:\Projects\styleguide\node_modules\buffertools
> node-gyp rebuild


C:\Projects\styleguide\node_modules\buffertools>if not defined npm_config_node_gyp (node "C:\Program Files\nodejs\node_modules\npm\bin\node-gyp-bin\\..\..\node_modules\node-gyp\bin\node-gyp.js" rebuild )  else (node "" rebuild )
gyp ERR! configure error
gyp ERR! stack Error: Can't find Python executable "python", you can set the PYTHON env variable.
gyp ERR! stack     at failNoPython (C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\configure.js:401:14)
gyp ERR! stack     at C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\configure.js:356:11
gyp ERR! stack     at FSReqWrap.oncomplete (fs.js:123:15)
gyp ERR! System Windows_NT 6.1.7601
gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild"
gyp ERR! cwd C:\Projects\styleguide\node_modules\buffertools
gyp ERR! node -v v6.5.0
gyp ERR! node-gyp -v v3.3.1
gyp ERR! not ok

Temporarily removed gulp-notify from $ gulp styles task in 367f52c.

We should find a better way to log and notify errors without them breaking the stream.

Add directories (assets, build, test,...) path settings during install process

http://stylelint.io/user-guide/configuration/#stylelintignore

• Ask for a "Title" (change the (component) suggestion to (Doc Title))
• Make sure the .scss of this page is in the styleguide.css and not the bundled main.css

Think about live reload in :

• Wordpress projects
• Web app projects
• Static styleguide projects

Stop adding and removing the BS script tag...

Error: ENOENT: no such file or directory, open '/Users/toni/Sites/Antistatique/reliva/assets/templates/atoms.html.swig'

😉

Apply ES2015 classic shit (let/const, arrow funky tasks, ...) expect for ES6 import, which is not currently supported by Node 6.x

• <span class="token tag"> is conflicting with Bootstrap 4 .tag element
• We are missing the color palettes overview 🎨
• I'd like to display the variants of a button but show only the first in the code preview
• Stylelint: "selector-pseudo-element-colon-notation": "single"
• Created a molecule, Toolbox is looking for assets/components/molecules/Button Tiles.html.swig. Actually it has set a name: Button Tiles in the component 😉
• "No license field" when installing. We should set one by default in package.json

Add (by default or prompted ?) SCSS snippets like :

• Spacers
• Responsive typography
• ...

Using slow-deps

According to npm-check-update (without the dangerous jQuery 3 “minor” update) :

 jquery                 ^2.2.4  →  ^3.1.0
 babel-core              6.8.0  →  6.14.0
 babel-loader            6.2.4  →   6.2.5
 contentful-metalsmith  ^0.1.0  →  ^0.3.0
 eslint                 ^2.5.3  →  ^3.5.0
 gulp-casperjs           0.0.5  →   0.0.6
 gulp-eslint            ^2.0.0  →  ^3.0.1
 gulp-mocha             ^2.1.1  →  ^3.0.1
 gulp-phantomcss         0.1.1  →   0.2.0
 gulp-stylelint         ^2.0.2  →  ^3.2.0
 gulp-uglify            ~1.5.1  →  ~2.0.0
 metalsmith-rootpath    ^0.1.7  →  ^1.0.4
 mocha                  ^2.2.5  →  ^3.0.2
 run-sequence           ~1.1.0  →  ~1.2.2
 stylelint              ^6.2.2  →  ^7.2.0
 yargs                  ^4.3.2  →  ^5.0.0

The following dependencies are satisfied by their declared version range, but the installed versions are behind. You can install the latest versions without modifying your package file by using npm update. If you want to update the dependencies in your package file anyway, use -a/--upgradeAll.

 bootstrap-sass             ~3.3.5  →   ~3.3.7
 async                 ^2.0.0-rc.2  →   ^2.0.1
 autoprefixer               ^6.2.3  →   ^6.4.1
 babel-preset-es2015        ^6.6.0  →  ^6.14.0
 browser-sync               ^2.7.1  →  ^2.15.0
 casperjs             ^1.1.0-beta3  →   ^1.1.3
 chai                       ^3.4.1  →   ^3.5.0
 del                        ~2.2.0  →   ~2.2.2
 gulp                       ^3.9.0  →   ^3.9.1
 gulp-changed               ^1.3.0  →   ^1.3.2
 gulp-clean-css             ^2.0.7  →  ^2.0.12
 gulp-concat                ^2.5.2  →   ^2.6.0
 gulp-gh-pages              ^0.5.1  →   ^0.5.4
 gulp-iconfont              ^8.0.0  →   ^8.0.1
 gulp-if                    ^2.0.0  →   ^2.0.1
 gulp-imagemin              ^3.0.1  →   ^3.0.3
 gulp-load-plugins          ^1.2.0  →   ^1.3.0
 gulp-postcss               ^6.0.1  →   ^6.2.0
 gulp-sass                  ^2.0.0  →   ^2.3.2
 gulp-size                  ^2.0.0  →   ^2.1.0
 gulp-sourcemaps            ^1.5.2  →   ^1.6.0
 gulp-util                  ^3.0.4  →   ^3.0.7
 imgur                      ^0.1.5  →   ^0.1.7
 jsdom                      ^9.0.0  →   ^9.5.0
 lodash                     ^4.1.6  →  ^4.15.0
 marked                     ^0.3.5  →   ^0.3.6
 metalsmith                 ^2.1.0  →   ^2.2.0
 phantomcss                 ^1.0.0  →   ^1.1.3
 sinon                     ^1.14.1  →  ^1.17.5
 sinon-chai                 ^2.7.0  →   ^2.8.0

Upgraded /Users/yago/Sites/Trashy/toolbox-055-demo/package.json

From apache served CMS.

as in title 😉

Let's Yarn everything! https://github.com/yarnpkg/yarn

We sell this support to our clients: antistatique.github.io/support

But we have this config in our gulp_config.json

"browsers": ["last 2 versions", "safari 5", "ie 8", "ie 9", "ff 27", "opera 12.1"]

Maybe we should have a more coherent config?

With current config: main.css 89.75 kB
With ["last 2 versions"]: main.css 88.06 kB
😜

It could be nice to avoid image generating every time :D

(!) #mkdir() is deprecated. Use mkdirp module instead. https://www.npmjs.com/package/mkdirp

After 0f90902, add more components that could often be use in most projects.

It happens every time you want to merge a branch into another, and when both of them have received a new component.

Toolbox adds the line in main.scss just after the comment, so a useless merge conflict happens, because Git.

// molecules:
<<<<<<< HEAD
@import 'molecules/teaser-card';
=======
@import 'molecules/fixed-bottom-container';
>>>>>>> master
@import 'molecules/pagination-vertical';
@import 'molecules/teaser-small';

[email protected]: Please use gulp-cssnano instead.

https://github.com/antistatique/typonsive

• .github/ISSUE_TEMPLATE.md
• .github/PULL_REQUEST_TEMPLATE.md

Suggestions on how to format them?

ISSUE_TEMPLATE

## Description
Describe the bug precisely.

## Steps to reproduce
Describe how you can reproduce this bug. Include some screenshots and clear descriptions to help us understanding.

## TODO
- [ ] things
- [ ] to do
- [ ] to fix this bug

PULL_REQUEST_TEMPLATE

Do we need one?

All tasks by default, comment when not used

We don't need the gulp deploy task anymore: