New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to use this project? #1

Open
Albert-Gao opened this Issue Oct 30, 2017 · 20 comments

Comments

Projects
None yet
10 participants
@Albert-Gao

Albert-Gao commented Oct 30, 2017

Thanks for the starter template, I just wonder how to use these commands in the package.json? What problems do they solve? Thanks :)

I need a template which could override the variables and styles, and still generate one single css and one min.css, can I do it via this project?

    "css-deploy": "npm run css-build && npm run css-postcss",
    "css-build": "node-sass _sass/main.scss css/main.css",
    "css-postcss": "postcss --use autoprefixer --output css/main.css css/main.css",
    "css-watch": "npm run css-build -- --watch",
    "deploy": "npm run css-deploy && npm run js-build",
    "js-build": "babel _javascript --out-dir lib",
    "js-watch": "npm run js-build -- --watch",
    "start": "npm run css-watch | npm run js-watch"
@runofthemill

This comment has been minimized.

runofthemill commented Dec 27, 2017

From the root of this package (not the root where you install it), you can run npm install to install all the Bulma dependencies. The commands above do the following:

npm run css-deploy - build the css from _sass_main.scss, and run it through autoprefixer; use this to generate production-ready css with vendor prefixes
npm run css-build - build the css from _sass_main.scss
npm run postcss - run the css through autoprefixer
npm run css-watch - watch your css files and build when changed
npm run deploy - generate production ready css & js assets
npm run js-build - generate production-ready js
npm run js-watch - watch your js files and build when changed
npm run start - watch your js & css files and build when changed <- use this for most development

Just add your code to _sass/main.scss and/or _javascript/main.js via imports if you want to keep your overrides separate.

Good luck!

@faroit

This comment has been minimized.

faroit commented Jan 22, 2018

@runofthemill this is very helpful and should go into the readme

@runofthemill

This comment has been minimized.

runofthemill commented Jan 22, 2018

thanks @faroit :)

@dawnbuie

This comment has been minimized.

dawnbuie commented Feb 22, 2018

I would also say - for newbies - that every instance of npm can be replaced with yarn.

I had trouble getting this to run on my computer with using npm - but yarn was error-free.

@benjaminapetersen

This comment has been minimized.

benjaminapetersen commented Mar 12, 2018

The README.md file should probably be updated to answer this question. I added bulma-start to my project via yarn install... then was left wondering, am I supposed to manually copy these scripts into my package.json? The other files as well? If I'm manually copying them, is it worth installing, or is there another way to do this that is a bit more correct?

It would be great to clearly know the intended use behind the scripts and other files in this repo.

Thanks!

@benjaminapetersen

This comment has been minimized.

benjaminapetersen commented Mar 12, 2018

An example, copying out the js-build script into your package.json won't work directly. You'll get:

$ yarn run js-build
yarn run v0.19.1
$ babel assets/js --out-dir lib
sh: babel: command not found
error Command failed with exit code 127.

Probably because having babel as a dependency of bulma-start instead of your own app means that your ./node_modules/.bin directory won't get the babel, babel-node executables.

@benjaminapetersen

This comment has been minimized.

benjaminapetersen commented Mar 12, 2018

Correction, not babel but babel-cli as a dependency of your main app. If you add babel, you will get this:

$ yarn run js-build
yarn run v0.19.1
$ babel assets/js --out-dir lib
You have mistakenly installed the `babel` package, which is a no-op in Babel 6.
Babel's CLI commands have been moved from the `babel` package to the `babel-cli` package.

    npm uninstall babel
    npm install --save-dev babel-cli

However, adding babel-cli then trying to run yarn run js-build will throw this error:

yarn run v0.19.1
$ babel assets/js --out-dir lib
Error: Couldn't find preset "es2015-ie" relative to directory "~/git/v1-static-html"
    at ~/git/v1-static-html/node_modules/babel-core/lib/transformation/file/options/option-manager.js:293:19
    at Array.map (<anonymous>)
    at OptionManager.resolvePresets (~/git/v1-static-html/node_modules/babel-core/lib/transformation/file/options/option-manager.js:275:20)
    at OptionManager.mergePresets (~/git/v1-static-html/node_modules/babel-core/lib/transformation/file/options/option-manager.js:264:10)
    at OptionManager.mergeOptions (~/git/v1-static-html/node_modules/babel-core/lib/transformation/file/options/option-manager.js:249:14)
    at OptionManager.init (~/git/v1-static-html/node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
    at File.initOptions (~/git/v1-static-html/node_modules/babel-core/lib/transformation/file/index.js:212:65)
    at new File (~/git/v1-static-html/node_modules/babel-core/lib/transformation/file/index.js:135:24)
    at Pipeline.transform (~/git/v1-static-html/node_modules/babel-core/lib/transformation/pipeline.js:46:16)
    at transform (~/git/v1-static-html/node_modules/babel-cli/lib/babel/util.js:50:22)
error Command failed with exit code 1.
@benjaminapetersen

This comment has been minimized.

benjaminapetersen commented Mar 12, 2018

I bet these scripts are handy if you know how to use them, the README.md just needs some love to help make this clear & improve the onboarding experience.

Thanks!

@dustinmichels

This comment has been minimized.

dustinmichels commented May 21, 2018

This thread has been helpful. I'm a little confused about if the files installed by bulma-start are intended to remain in the node_modules folder of a larger project, or if you are intended to move all the files to the top-level, so they become the project?

Eg, at installation the file structure looks like this:

screen shot 2018-05-21 at 4 08 24 pm

If I move the bulma-start folder to the top level, run npm install, and delete the original node_modules/ and package-lock.json, the file structure looks like this:

screen shot 2018-05-21 at 4 10 53 pm

Is that the intended usage? Thank you!!

@benjaminapetersen

This comment has been minimized.

benjaminapetersen commented May 21, 2018

I'm still wondering the same, as well as a third option, if its more or less intended to be forked, then cloned down & renamed as a start for whatever else you end up building. I moved on from this starter pack since then & have added bulma the traditional way.

@crond-io

This comment has been minimized.

crond-io commented Jun 1, 2018

I have found cloning this project instead of npm install to be easier to get started. If I npm install then I'll have to dig into the node_modules/bulma-start directory to start making changes, am I doing something wrong here?

@benjaminapetersen

This comment has been minimized.

benjaminapetersen commented Jun 1, 2018

You should def never change things in node_modules.

You could clone, or fork and rename, but that's a bit strange for a project of any normal size as well as you probably would change A LOT of the root directory bits.

I think author intent is still needed via REAME.md.

@crung

This comment has been minimized.

crung commented Jun 14, 2018

+1 I really don't understand why it's useful to install this via npm.

@frispete

This comment has been minimized.

Contributor

frispete commented Aug 10, 2018

Guys, have a look at 3a97c5e to see, if that clears things up.

@faroit

This comment has been minimized.

faroit commented Aug 10, 2018

@frispete this is great work. Thanks!

@erickhun

This comment has been minimized.

erickhun commented Aug 11, 2018

@frispete really useful! solved my issue

@benjaminapetersen

This comment has been minimized.

benjaminapetersen commented Aug 13, 2018

Good information, just left a comment, would be great to have all beginner information in the README, since its probably the most standard entry point into any project.

Very explicitly stating "this is not a dependency, its a starter template, clone it, copy to the root directory & hack away!" is exactly what this project needs.

@frispete

This comment has been minimized.

Contributor

frispete commented Aug 22, 2018

Hi @benjaminapetersen, hi guys,

I've moved the beginners notes to README.md, and slightly rephrased it here.

What do you think, does it fully addresses its purpose?

@frispete

This comment has been minimized.

Contributor

frispete commented Aug 22, 2018

Hey guys,

Jeremy merged the PR.

@Albert-Gao in the hope, that this clears things up well enough, you might consider closing this issue.

@benjaminapetersen

This comment has been minimized.

benjaminapetersen commented Aug 22, 2018

Much better. I'm good with closing this (I don't own the issue).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment