sbeleidy/index.html

## readme.md

      
    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.

  
## 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>

## 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"
  }
}
	<!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>
	{
	"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"
	}
	}