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

用户登录 ⁄ 注册

分享到: