10分钟构建一个html5响应式开发框架
前置环境：nodejs git 保证可以访问github.com
1.以管理员身份运行cmd.exe,安装yo
mkdir webapp cd webapp npm install generator-webapp npm install yo -g
2.安装webapp
D:\webapp2>yo webapp
_-----_ ╭──────────────────────────╮
| | │ 'Allo 'allo! Out of the │
|--(o)--| │ box I include HTML5 │
`---------´ │ Boilerplate, jQuery, and │
( _´U`_ ) │ a gulpfile to build your │
/___A___\ /│ app. │
| ~ | ╰──────────────────────────╯
__'.___.'__
´ ` |° ´ Y `
npm install generator-webapp? Which additional features would you like to include? (Press <space> to select, <a> to toggle all, <i> to inverse sele
ction)
>(*) Sass
(*) Bootstrap
(*) Modernizr
3.选 中bootstrap ，其它先不选
npm install generator-webapp? Which additional features would you like to include? (Press <space> to select, <a> to togg? Which additional features would you like to include? Bootstrap ? Which version of Bootstrap would you like to include? Bootstrap 3 ? Choose your style of DSL BDD create bower.json create package.json create gulpfile.js create .babelrc create .gitignore create .gitattributes create .bowerrc create .editorconfig create app\favicon.ico create app\apple-touch-icon.png create app\robots.txt create app\styles\main.css create app\scripts\main.js create app\index.html create test\spec\test.js create test\index.html I'm all done. Running npm install && bower install for you to install the required dependencies. If this fails, try running the command yourself.
4.开始安装了
bower bootstrap#~3.3.5 progress received 0.2MB of 4.0MB downloaded, 5% bower bootstrap#~3.3.5 progress received 0.2MB of 4.0MB downloaded, 5% bower bootstrap#~3.3.5 progress received 0.2MB of 4.0MB downloaded, 6% bower bootstrap#~3.3.5 progress received 0.2MB of 4.0MB downloaded, 6% bower bootstrap#~3.3.5 progress received 0.2MB of 4.0MB downloaded, 6% bower bootstrap#~3.3.5 progress received 0.2MB of 4.0MB downloaded, 6% bower bootstrap#~3.3.5 progress received 0.3MB of 4.0MB downloaded, 6% bower mocha#* progress received 0.2MB of 0.3MB downloaded, 66% bower bootstrap#~3.3.5 progress received 0.3MB of 4.0MB downloaded, 7% bower bootstrap#~3.3.5 progress received 0.3MB of 4.0MB downloaded, 7% bower mocha#* progress received 0.2MB of 0.3MB downloaded, 72% bower mocha#* progress received 0.2MB of 0.3MB downloaded, 77% bower bootstrap#~3.3.5 progress received 0.3MB of 4.0MB downloaded, 7% bower mocha#* progress received 0.2MB of 0.3MB downloaded, 82% bower bootstrap#~3.3.5 progress received 0.3MB of 4.0MB downloaded, 8% bower bootstrap#~3.3.5 progress received 0.3MB of 4.0MB downloaded, 8% bower mocha#* progress received 0.2MB of 0.3MB downloaded, 83% bower mocha#* progress received 0.2MB of 0.3MB downloaded, 88% bower mocha#* progress received 0.2MB of 0.3MB downloaded, 89% bower bootstrap#~3.3.5 progress received 0.3MB of 4.0MB downloaded, 8% bower mocha#* progress received 0.3MB of 0.3MB downloaded, 95% bower bootstrap#~3.3.5 progress received 0.3MB of 4.0MB downloaded, 8% bower bootstrap#~3.3.5 progress received 0.3MB of 4.0MB downloaded, 8% bower mocha#* progress received 0.3MB of 0.3MB downloaded, 95% bower mocha#* progress received 0.3MB of 0.3MB downloaded, 99% bower mocha#* progress received 0.3MB of 0.3MB downloaded, 99% bower bootstrap#~3.3.5 progress received 0.3MB of 4.0MB downloaded, 9% bower mocha#* extract archive.tar.gz bower bootstrap#~3.3.5 progress received 0.4MB of 4.0MB downloaded, 9% bower mocha#* resolved https://github.com/mochajs/mocha.git#3.3.0 bower bootstrap#~3.3.5 progress received 0.4MB of 4.0MB downloaded, 10%
5.执行gulp起动服务，成功出现界面。
D:\webapp2>gulp serve:dist
[20:36:57] Using gulpfile D:\webapp2\gulpfile.js
[20:36:57] Starting 'default'...
[20:36:57] Starting 'clean'...
[20:36:57] Starting 'wiredep'...
[20:36:57] Finished 'wiredep' after 16 ms
[20:36:57] Finished 'clean' after 106 ms
[20:36:57] Starting 'lint'...
[20:36:58] Starting 'styles'...
[20:36:58] Starting 'scripts'...
[20:37:00] Starting 'images'...
[20:37:00] Starting 'fonts'...
[20:37:00] Starting 'extras'...
[20:37:00] Finished 'images' after 215 ms
[20:37:00] Finished 'fonts' after 59 ms
[20:37:00] Finished 'lint' after 3.09 s
[20:37:00] Finished 'styles' after 2.63 s
[20:37:00] Finished 'scripts' after 2.02 s
[20:37:00] Starting 'html'...
[20:37:05] Finished 'html' after 4.54 s
[20:37:05] Finished 'extras' after 5.21 s
[20:37:05] Starting 'build'...
[20:37:05] build all files 38.45 kB (gzipped)
[20:37:05] Finished 'build' after 55 ms
[20:37:05] Finished 'default' after 7.83 s
[20:37:05] Starting 'serve:dist'...
[20:37:05] Finished 'serve:dist' after 26 ms
[BS] Access URLs:
--------------------------------------
Local: http://localhost:9000
External: http://192.168.42.98:9000
--------------------------------------
UI: http://localhost:3001
UI External: http://192.168.42.98:3001
--------------------------------------
[BS] Serving files from: dist
彩蛋1：
如果bootstrap总是下载不下来，可以用下载工具下载，完成后直接拷到 \bower_components 文件夹下，然后运行gulp build ,之后再运行 gulp serve:dist可就以启动成功了！
彩蛋2：什么？访问不了github.com
试试看看改改hosts文件就可以了
192.30.255.113 github.com
彩蛋3：什么，hosts文件改了存不了？
拷出来，在桌面改，改完再盖回去！
报错1：
SyntaxError: Unexpected string in JSON at position 95
at Object.parse (native)
at wiredep (D:\webapp2\node_modules\wiredep\wiredep.js:36:43)
at DestroyableTransform._transform (D:\webapp2\node_modules\wiredep\wiredep.js:136:34)
at DestroyableTransform.Transform._read (D:\webapp2\node_modules\readable-stream\lib\_stream_transform.js:159:10)
at DestroyableTransform.Transform._write (D:\webapp2\node_modules\readable-stream\lib\_stream_transform.js:147:83)
at doWrite (D:\webapp2\node_modules\readable-stream\lib\_stream_writable.js:338:64)
at writeOrBuffer (D:\webapp2\node_modules\readable-stream\lib\_stream_writable.js:327:5)
at DestroyableTransform.Writable.write (D:\webapp2\node_modules\readable-stream\lib\_stream_writable.js:264:11)
at write (D:\webapp2\node_modules\gulp\node_modules\readable-stream\lib\_stream_readable.js:623:24)
at flow (D:\webapp2\node_modules\gulp\node_modules\readable-stream\lib\_stream_readable.js:632:7)
这是因为bower install 没有执行，gulp bulid没有运行
