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没有运行