A-A+

10分钟构建一个html5响应式开发框架

2017年05月08日 javascript 暂无评论 阅读 3 views 次

前置环境: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

2017-05-08_211115

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

打赏作者
如果文章对您有所帮助请打赏支持本站发展。

您的支持将鼓励我们继续创作!

[微信] 扫描二维码打赏

[支付宝] 扫描二维码打赏

给我留言

您必须 登录 才能发表留言!

Copyright © 大一网 保留所有权利.   Theme  Ality

用户登录 ⁄ 注册

分享到: