Skip to content

Instantly share code, notes, and snippets.

@sbeleidy

sbeleidy/index.html

Last active March 20, 2017 19:14
Show Gist options
  • Save sbeleidy/c524c50b98afd821c4933aae93784938 to your computer and use it in GitHub Desktop.
Save sbeleidy/c524c50b98afd821c4933aae93784938 to your computer and use it in GitHub Desktop.
Download ZIP
Foundation project package.json - inspired by https://css-tricks.com/why-npm-scripts/
Raw
readme.md

Setting up a Foundation project with npm-scripts

Folder structure

root
|
|-- dist
    |
    |-- css
    |
    |-- js
|
|-- src
    |
    |-- scss
        |
        |-- style.scss
    |
    |-- js
        |
        |-- app.js
|
|-- index.html

Set up

Copy the foundation _settings.scss file to src/scss/_settings.scss. It's available at /node_modules/foundation-sites/scss/settings/_settings.scss after you've run npm install. Edit the util path in the _settings.scss file to be foundation/util/util and then import what you need in your style.scss file. Eg:

@import "settings";
@import "foundation/foundation";
@include foundation-everything;

Building

To set up everything for development, run npm install then npm start.

To build your project, run npm install then npm run build.

Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Foundation Project</title>
<meta charset="UTF-8">
<link href="dist/css/style.css" rel="stylesheet">
</head>
<body>
<script src="dist/js/jquery.js"></script>
<script src="dist/js/app.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
Raw
package.json
{
"name": "foundation-project",
"version": "0.0.1",
"description": "A project with foundation and npm scripts",
"main": " ",
"scripts": {
"copy:foundation": "mkdir -p dist && mkdir -p dist/js && mkdir -p dist/css && cp -a node_modules/foundation-sites/scss/. src/scss/foundation/ && cp -a node_modules/foundation-sites/dist/js/foundation.js src/js/foundation.js",
"copy:jquery": " mkdir -p dist && mkdir -p dist/js && cp -a node_modules/foundation-sites/vendor/jquery/dist/jquery.js dist/js/jquery.js",
"copy": "npm-run-all copy:*",
"test": "echo \"Tests would have run now\"",
"scss": "node-sass --output-style compressed -o dist/css src/scss/style.scss",
"autoprefixer": "postcss -u autoprefixer -r dist/css/*",
"uglify": "mkdir -p dist/js && uglifyjs src/js/*.js -m -o dist/js/app.js",
"serve": "browser-sync start --server --files 'dist/css/*.css, dist/js/*.js' '*.html'",
"build:css": "npm run scss && npm run autoprefixer",
"build:js": "npm run uglify",
"watch:css": "onchange 'src/scss/*.scss' -- npm run build:css",
"watch:js": "onchange 'src/js/*.js' -- npm run build:js",
"watch:all": "parallelshell 'npm run serve' 'npm run watch:css' 'npm run watch:js'",
"start": "npm run copy && npm run watch:all",
"build": "npm run copy && npm-run-all build:*"
},
"repository": {
"type": "git",
"url": ""
},
"author": "",
"license": "MIT",
"bugs": {
"url": ""
},
"homepage": "",
"devDependencies": {
"autoprefixer": "^6.3.6",
"browser-sync": "^2.13.0",
"node-sass": "^3.8.0",
"npm-run-all": "^2.3.0",
"onchange": "^2.5.0",
"parallelshell": "^2.0.0",
"postcss-cli": "^2.5.2",
"uglify-js": "^2.6.4"
},
"dependencies": {
"foundation-sites": "^6.2.3"
}
}
@albirs
Copy link

albirs commented Feb 21, 2017

Hi sbeleidy, very nice work! i have try this and always i got this error:
verbose stack Error: [email protected] start: npm run copy && npm run watch:all
... and ...
error Failed at the [email protected] start script 'npm run copy && npm run watch:all'.

i have updated via npm-check-updates but no soluten for this... do you have may be any idea? Thank you very much!!!

@sbeleidy
Copy link
Author

Hi @albirs - so sorry I just saw your message. I've fixed the issue and it should work now.

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