You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository was archived by the owner on Mar 16, 2021. It is now read-only.
[Download NAMESPACE-UP](https://github.com/GITHUB-USERNAME/NAMESPACE-LOW/archive/master.zip) / [View the demo](http://GITHUB-USERNAME.github.io/NAMESPACE-LOW/).
4
+
[Download NAMESPACE-UP](https://github.com/GITHUB-USERNAME/NAMESPACE-LOW/archive/master.zip) / [View the demo](http://GITHUB-USERNAME.github.io/NAMESPACE-LOW/)
5
5
6
6
**In This Documentation**
7
7
8
8
1.[Getting Started](#getting-started)
9
9
2.[Installing with Package Managers](#installing-with-package-managers)
10
-
3.[Options & Settings](#options-and-settings)
11
-
4.[Browser Compatibility](#browser-compatibility)
12
-
5.[How to Contribute](#how-to-contribute)
13
-
6.[License](#license)
14
-
7.[Changelog](#changelog)
15
-
8.[Older Docs](#older-docs)
10
+
3.[Working with the Source Files](#working-with-the-source-files)
11
+
4.[Options & Settings](#options-and-settings)
12
+
5.[Browser Compatibility](#browser-compatibility)
13
+
6.[How to Contribute](#how-to-contribute)
14
+
7.[License](#license)
15
+
8.[Changelog](#changelog)
16
+
9.[Older Docs](#older-docs)
16
17
17
18
18
19
19
20
## Getting Started
20
21
21
-
Compiled and production-ready code can be found in the `dist` directory. The `src` directory contains development code. Unit tests are located in the `test` directory.
22
+
Compiled and production-ready code can be found in the `dist` directory. The `src` directory contains development code. Unit tests are located in the `test` directory. It's the same build system that's used by [Kraken](http://cferdinandi.github.io/kraken/), so it includes some unnecessary tasks and Sass variables but can be dropped right in to the boilerplate without any configuration.
NAMESPACE-UP is [built with Sass](http://sass-lang.com/) for easy customization. If you don't use Sass, that's ok. The `css` folder contains compiled vanilla CSS.
33
33
34
34
The `_config.scss` and `_mixins.scss` files are the same ones used in [Kraken](http://GITHUB-USERNAME.github.io/kraken/), so you can drop the `_NAMESPACE-LOW.css` file right into Kraken without making any updates. Or, adjust the variables to suit your own project.
35
35
36
-
NAMESPACE-UP also requires [classList.js](https://github.com/eligrey/classList.js) and `bind-polyfill.js`, polyfills that extend ECMAScript 5 API support to more browsers.
36
+
NAMESPACE-UP also requires [classList.js](https://github.com/eligrey/classList.js), a polyfillthat extends ECMAScript 5 API support to more browsers.
37
37
38
38
### 2. Add the markup to your HTML.
39
39
@@ -65,6 +65,28 @@ You can install NAMEPSACE-UP with your favorite package manager.
65
65
66
66
67
67
68
+
## Working with the Source Files
69
+
70
+
If you would prefer, you can work with the development code in the `src` directory using the included [Gulp build system](http://gulpjs.com/). This compiles, lints, and minifies code, and runs unit tests. It's the same build system that's used by [Kraken](http://cferdinandi.github.io/kraken/), so it includes some unnecessary tasks and Sass variables but can be dropped right in to the boilerplate without any configuration.
1. In bash/terminal/command line, `cd` into your project directory.
82
+
2. Run `npm install` to install required files.
83
+
3. When it's done installing, run one of the task runners to get going:
84
+
* `gulp` manually compiles files.
85
+
* `gulp watch` automatically compiles files when changes are made.
86
+
* `gulp reload` automatically compiles files and applies changes using [LiveReload](http://livereload.com/).
87
+
88
+
89
+
68
90
## Options and Settings
69
91
70
92
NAMESPACE-UP includes smart defaults and works right out of the box. But if you want to customize things, it also has a robust API that provides multiple ways for you to adjust the default options and settings.
@@ -103,7 +125,7 @@ Description
103
125
```
104
126
105
127
#### destroy()
106
-
Destroy the current `NAMESPACE-LOW.init()`.
128
+
Destroy the current `NAMESPACE-LOW.init()`. This is called automatically during the init function to remove any existing initializations.
My boilerplate for creating new web projects with [Gulp.js](http://gulpjs.com/). Forked from [Todd Motto's GulpOSS](https://github.com/toddmotto/gulp-oss) with some additions from [Mark Goodyear and Big Bite Creative](https://github.com/bigbitecreative/base).
3
+
My boilerplate for creating new web projects with [Gulp.js](http://gulpjs.com/). Forked from [Todd Motto's GulpOSS](https://github.com/toddmotto/gulp-oss) with some additions from [Mark Goodyear and Big Bite Creative](https://github.com/bigbitecreative/base) and various tutorials around the web.
4
4
5
5
* Lints and concatenates JS files.
6
6
* Compiles Sass files and automatically [adds vendor prefixes](https://github.com/ai/autoprefixer).
7
-
* Exports both minified and expanded JS and CSS files.
7
+
* Exports both minified and expanded JS and CSS files with header info.
8
+
* Generates SVG sprites.
9
+
* Generates documentation.
8
10
* Cleans up file directories.
9
-
* Adds a header to the top of all JS and CSS files.
10
11
* Runs Jasmine unit tests and generates reports.
11
12
* Includes a `.travis.yml` file for continuous integration with [TravisCI](https://travis-ci.org).
12
13
@@ -15,10 +16,12 @@ My boilerplate for creating new web projects with [Gulp.js](http://gulpjs.com/).
15
16
**In This Documentation**
16
17
17
18
1.[Getting Started](#getting-started)
18
-
2.[Options & Settings](#options-and-settings)
19
-
3.[Unit Testing](#unit-testing)
20
-
3.[License](#license)
21
-
4.[Changelog](#changelog)
19
+
2.[File Structure](#file-structure)
20
+
3.[Working with the Source Files](#working-with-the-source-files)
1. In bash/terminal/command line, `cd` into your project directory.
36
38
2. Run `npm install` to install required files.
37
-
3. When it's done installing, run `gulp` to get going.
39
+
3. When it's done installing, run one of the task runners to get going:
40
+
* `gulp` manually compiles files.
41
+
* `gulp docs` manually compiles files and generates documentation.
42
+
* `gulp watch` automatically compiles files when changes are made.
43
+
* `gulp watch:docs` automatically compiles files and geneates docs when changes are made.
44
+
* `gulp reload` automatically compiles files and applies changes using [LiveReload](http://livereload.com/).
45
+
* `gulp reload:docs` automatically compiles files, generates docs, and applies changes using [LiveReload](http://livereload.com/).
38
46
39
-
Every time you want to run your tasks, run `gulp`.
40
47
41
-
### File Structure
42
48
43
-
Add your files to the appropriate `src` subdirectories. Gulp will process and and compile them into `dist`. Content in subdirectories under the `js` folder will be concatenated. (For example, files in `js/detects` will compile into `detects.js`.) Files directly under `js` will compile individually.
49
+
## File Structure
50
+
51
+
Add your files to the appropriate `src` subdirectories. Gulp will process and and compile them into `dist`.
52
+
53
+
* Content in subdirectories under the `js` folder will be concatenated. For example, files in `js/detects` will compile into `detects.js`. Files directly under `js` will compile individually.
54
+
* SVGs in the `svg` directory will compile into `icons.svg`.
55
+
* Assets in the `assets` directory will be copied as-is into the `dist` directory.
44
56
45
57
```
46
58
gulp-boilerplate/
@@ -49,20 +61,29 @@ gulp-boilerplate/
49
61
| | |—— myplugin.css
50
62
| | |—— myplugin.min.css
51
63
| |—— js/
52
-
| | |—— bind-polyfill.js
53
-
| | |—— bind-polyfill.min.js
54
64
| | |—— classList.js
55
65
| | |—— classList.min.js
56
66
| | |—— myplugin.js
57
67
| | |—— myplugin.min.js
68
+
| |—— svg/
69
+
| | |—— icons.svg
58
70
| |—— # static assets
71
+
|—— docs/
72
+
| |—— assets/
73
+
| |—— dist/
74
+
| |—— index.html
75
+
| |—— # other docs
59
76
|—— src/
60
77
| |—— js/
61
-
| | |—— bind-polyfill.js
62
78
| | |—— classList.js
63
79
| | |—— myplugin.js
64
80
| |—— sass/
65
-
| | |—— myplugin.sass
81
+
| | |—— _config.scss
82
+
| | |—— _mixins.scss
83
+
| | |—— components/
84
+
| | | |—— myplugin.scss
85
+
| |—— svg/
86
+
| | |—— # svgs
66
87
| |—— static/
67
88
| | |—— # static assets
68
89
|—— test/
@@ -77,11 +98,35 @@ gulp-boilerplate/
77
98
|—— index.html
78
99
|—— package.json
79
100
|—— README.md
80
-
|—— STARTER-README.md
101
+
|—— README-TEMPLATE.md
81
102
```
82
103
83
104
84
105
106
+
## Working with the Source Files
107
+
108
+
### Sass
109
+
110
+
Sass files are located in `src` > `sass`. Gulp generates minified and unminified CSS files. It also includes [autoprefixer](https://github.com/postcss/autoprefixer), which adds vendor prefixes for you if required by the last two versions of a browser.
111
+
112
+
### JavaScript
113
+
114
+
JavaScript files are located in the `src` > `js` directory.
115
+
116
+
Files placed directly in the js folder will compile directly to `dist` > `js` as both minified and unminified files. Files placed in subdirectories will also be concatenated into a single file. For example, files in `js/detects` will compile into `detects.js`. Files directly under `js` will compile individually.
117
+
118
+
#### Unit Testing
119
+
120
+
Gulp Boilerplate is set up for unit testing with [Jasmine](http://jasmine.github.io/2.0/introduction.html). Add your tests to `test/spec/spec-myplugin.js`. Adjust filenames and references as needed.
121
+
122
+
Unit test results are printed in terminal, but you can also view them in a browser under `test/results/unit-tests.html`. Get a report of how much of your scripts is covered by testing under `test/coverage`.
123
+
124
+
### SVGs
125
+
126
+
SVG files placed in the `src` > `svg` directory will be compiled into a single SVG sprite called `icons.svg` in the `dist` > `svg` directory.
127
+
128
+
129
+
85
130
## Options and Settings
86
131
87
132
### Updating Project Details
@@ -95,30 +140,47 @@ Inside `gulpfile.js` you'll see a variable named `paths`. Adjust the paths to su
95
140
96
141
```js
97
142
var paths = {
98
-
output :'dist/',
99
-
scripts : {
100
-
input : [ 'src/js/*' ],
101
-
output :'dist/js/'
102
-
},
103
-
styles : {
104
-
input :'src/sass/**/*.scss',
105
-
output :'dist/css/'
106
-
},
107
-
static :'src/static/**',
108
-
test : {
109
-
spec : [ 'test/spec/**/*.js' ],
110
-
coverage:'test/coverage/',
111
-
results:'test/results/'
112
-
}
143
+
input:'src/**/*',
144
+
output:'dist/',
145
+
scripts: {
146
+
input:'src/js/*',
147
+
output:'dist/js/'
148
+
},
149
+
styles: {
150
+
input:'src/sass/**/*.{scss,sass}',
151
+
output:'dist/css/'
152
+
},
153
+
svgs: {
154
+
input:'src/svg/**/*.svg',
155
+
output:'dist/svg/'
156
+
},
157
+
static:'src/static/**',
158
+
test: {
159
+
input:'src/js/**/*.js',
160
+
karma:'test/karma.conf.js',
161
+
spec:'test/spec/**/*.js',
162
+
coverage:'test/coverage/',
163
+
results:'test/results/'
164
+
},
165
+
docs: {
166
+
input:'src/docs/*.{html,md,markdown}',
167
+
output:'docs/',
168
+
templates:'src/docs/_templates/',
169
+
assets:'src/docs/assets/**'
170
+
}
113
171
};
114
172
```
115
173
116
174
117
-
## Unit Testing
118
175
119
-
Gulp Boilerplate is set up for unit testing with [Jasmine](http://jasmine.github.io/2.0/introduction.html). Add your tests to `test/spec/spec-myplugin.js`. Adjust filenames and references as needed.
176
+
## Continuous Integration
177
+
178
+
This boilerplate includes a configuration file for [Travis CI](http://docs.travis-ci.com/user/getting-started/), a continuous integration service for GitHub.
179
+
180
+
If you sign-up and activate it for your repository, Travis CI will run your build and execute any processes to make sure everything is working as expected. This is particularly useful when working with a team or managing open source projects with multiple contributors.
181
+
182
+
The `.travis.yml` file is pre-configured for the boilerplate's build system. Even if you add files or update the Gulp tasks, you shouldn't need to change anything for it to work.
120
183
121
-
Unit test results are printed in terminal, but you can also view them in a browser under `test/results/unit-tests.html`. Get a report of how much of your scripts is covered by testing under `test/coverage`.
122
184
123
185
124
186
## License
@@ -131,6 +193,12 @@ Gulp Boilerplate is licensed under the [MIT License](http://gomakethings.com/mit
0 commit comments