2

Bem, tenho um projeto que tem o

package.json

{
  "name": "designimpl",
  "version": "1.0.0",
  "description": "",
  "main": "gulpfile.js",
  "dependencies": {
    "browser-sync": "^2.18.8",
    "del": "^2.2.2",
    "gulp": "^3.9.1",
    "gulp-concat": "^2.6.1",
    "gulp-inject": "^4.2.0",
    "gulp-order": "^1.1.1",
    "gulp-sass": "^3.1.0",
    "gulp-uglify": "^2.0.1",
    "gulp-watch": "^4.3.11",
    "main-bower-files": "^2.13.1",
    "run-sequence": "^1.2.2"
  },
  "devDependencies": {
    "gulp-main-bower-files": "^1.6.1",
    "gulp-ng-annotate": "^2.0.0"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/rshmtud/DesignImpl.git"
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/rshmtud/DesignImpl/issues"
  },
  "homepage": "https://github.com/rshmtud/DesignImpl#readme"
}

Eu preciso rodar o sistema localmente. O sistema usa angularjs, node.js. Parece que ele foi instalado com o gulp, acho isso porque tem um arquivo no repositório chamado gulpfile.js.

Quando eu abro a pagina index.html a página fica assim: Partes cinzar são apenas textos removidos

Alguém poderia me ajudar a rodar esse site? Eu só quero ver o site do jeito que ele é.

Codigo do index.html

<!DOCTYPE html>
<html lang={{lang}} ng-app="App" ng-controller="mainCtrl">
<head>
    <meta charset="utf-8">
    <title>SkipQ</title>
    <base href="/">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">

    <!-- inject:css -->
    <!-- endinject -->
    <link href='https://fonts.googleapis.com/css?family=Roboto:400,500' rel='stylesheet' type='text/css'>
    <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
    <script type="text/javascript"
            src="https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyCg2cJfEvkDhzke8CMmeC6aLIwApi6jC5E"></script>

    <!--<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>-->
    <!-- inject:js -->
    <!-- endinject -->
</head>
<body class="site" ng-class="{'has-footer': $root.hasFooter}">
<!-- navigation section -->
<div class="container-fluid" style="width:100%;display: flex;min-height: 100vh;flex-direction: column;">
    <section class="navbar navbar-default navbar-fixed-top" role="navigation"
             style="padding-left: 25px; padding-right: 25px;" data-ng-controller="loginCtrl">
        <div class="navbar-header">
            <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon icon-bar"></span>
                <span class="icon icon-bar"></span>
                <span class="icon icon-bar"></span>
            </button>
            <!--a href="#" class="navbar-brand">SkipQ</a-->
            <a href="#/home"><img src="assets/images/logo.png" style="background-color: white;" alt=""></a>
        </div>
        <div class="collapse navbar-collapse">
            <!--<div class="collapse navbar-collapse" data-toggle="collapse" data-target=".navbar-collapse">-->
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#/home" data-ng-show="isLoggedIn || !isLoggedIn " class="smoothScroll"
                       translate="HOME"></a>
                <li><a href="#/home#zusammenarbeit" class="smoothScroll">Zusammenarbeit</a>
                <li><a href="#/adminLogin" data-ng-show="!isAdminLoggedIn" class="smoothScroll"
                       translate="ADMIN"></a>
                <li><a href="#/admin" data-ng-show="isAdminLoggedIn" class="smoothScroll" translate="ADMIN"></a>
                <li ng-show="isLoggedIn || isAdminLoggedIn"><a href="#/orderHistory" translate="ORDER"></a></li>
                <li ng-show="isLoggedIn || isAdminLoggedIn"><a href="#/profile" translate="PROFILE"></a></li>
                <!--
                <li ng-controller="LanguageSwitchController">
                    <select id="language-select" ng-model="selectedlanguage"
                            ng-change="changeLanguage(selectedlanguage.language)"
                            ng-options="i as i.language for i in languages" style="width: 80px">
                    </select>

                    <!--<img ng-src="{{selectedlanguage.imagelink}}" class="img-thumbnail icon-small">{{selectedlanguage.language}}-->
                <!--
                                </li>
                                -->
                <!--
                                <li class="dropdown" data-ng-show="isLoggedIn || isAdminLoggedIn ">
                                    <a class="dropdown-toggle" data-toggle="dropdown">Welcome {{userName}} <b class="caret"></b></a>
                                    <ul class="dropdown-menu">
                                        <li><a href="#/orderHistory" translate="ORDER"></a></li>
                                        <li><a href="#/profile" translate="PROFILE"></a></li>
                                        -->
                <!--<li class="divider"></li>-->
                <!--<li><a href="#">Separated link</a></li>-->
                <!--
                    </ul>
                </li>
                -->


                <li><a data-ng-show="!isLoggedIn && !isAdminLoggedIn" ng-click="open()" translate="LOGIN"></a></li>
                <li data-ng-show="isLoggedIn || isAdminLoggedIn"><a href="" ng-click="logOut()"
                                                                    translate="LOGOUT"></a>
                </li>

            </ul>
        </div>
    </section>

    <main class="site-content">
        <div class="myview" ng-view><!-- VIEWS --></div>
    </main>
    <!-- copyright section -->
    <footer>
        <section id="copyright">
            <div class="row"
                 style="display: flex;  align-items: center;  justify-content: center;background-color: #343434">
                <div class="col-md-4 col-sm-4">
                    <ul class="social-icon">
                        <li><a href="https://www.facebook.com/SkipQ-836575119799276/" class="fa fa-facebook"></a>
                        </li>
                        <li><a href="#" class="fa fa-twitter"></a></li>
                    </ul>
                </div>
                <div class="col-md-4 col-sm-4">
                    <h3 style="color: white !important">SkipQ</h3>
                    <p>Copyright © SkipQ
                        | Design: <a rel="nofollow" href="http://www.tooplate.com" target="_parent">Tooplate</a>
                        | <a href="https://skipq.de/Impressum/Impressum.php">Impressum</a>
                    </p>
                </div>
                <div class="col-md-4 col-sm-4">
                    <div class="ph">
                        <i class="fa fa-phone"></i> +49 (0) 176 83413991
                    </div>
                    <div class="address">
                        <i class="fa fa-map-marker"></i> Robert-Bosch-Strasse 7, 64293 Darmstadt, Germany
                    </div>
                    <div class="email">
                        <i class="fa fa-paper-plane"></i> [email protected]
                    </div>
                </div>
            </div>
        </section>
    </footer>
</div>
</body>
</html>

<script type="text/javascript">
  $('ul.nav li.dropdown').hover(function () {
    $(this).find('.dropdown-menu').stop(true, true).delay(50).fadeIn(50);
  }, function () {
    $(this).find('.dropdown-menu').stop(true, true).delay(100).fadeOut(50);
  });
</script>
7
  • 1
    Instale um webserver. Nginx, Apache, IIS.. então poderá acessar por http://localhost Commented 7/06/2017 às 9:33
  • Eu instalei o webserver do node, porém, quando eu abro continua a mesma coisa. Commented 7/06/2017 às 9:43
  • O que aparece no console do navegador?
    – Woss
    Commented 7/06/2017 às 10:44
  • @AndersonCarlosWoss , Failed to load resource: the server responded with a status of 404 (Not Found) localhost/:125 Uncaught ReferenceError: $ is not defined at localhost/:125 logo.png Failed to load resource: the server responded with a status of 404 (Not Found) Commented 7/06/2017 às 11:12
  • Por favor, editar a pergunta é adicionar o código de index.html.
    – Woss
    Commented 7/06/2017 às 11:20

1 Resposta 1

3

A presença de um arquivo package.json indica que o projeto é um pacote NPM.

Este arquivo contém vários dados relevantes ao projeto, como sua identificação e dependências, licenças e outros. Se você instalou o NodeJS na sua máquina, você provavelmente tem o NPM instalado também - ele é parte da instalação.

No seu caso o pacote possui várias dependências. Para instalá-las, digite o seguinte comando no diretório onde o arquivo package.json está presente:

npm install

Opcionalmente, você pode atualizar as dependências utilizando o seguinte comando:

npm update 

A presença de um arquivo gulpfile.js indica que o projeto utiliza o Gulp como executor de tarefas como processamento SASS e parsing de CoffeeScript. Caso você ainda não o tenha instalado, este é o momento.

Em um ambiente Linux:

sudo npm install --global gulp

Em um ambiente Windows:

npm install --global gulp

O parâmetro --global indica que o Gulp será instalado no escopo da máquina, e não do projeto, fazendo com que ele esteja disponível para ser utilizado em outros projetos locais.

Abrindo seu arquivo gulp.js você pode observar os tasks definidos - por exemplo:

gulp.task('js', function() {
  gulp.src('scripts/*.js')   // Fonte dos arquivos a serem trabalhados
  .pipe(uglify())            // Compacta os arquivos
  .pipe(concat('script.js')) // Concatena o resultado em um único arquivo
  .pipe(gulp.dest('assets')) // E salva o resultado no folder /assets
});

Para executar o task definido acima, utilize o seguinte comando:

gulp js

Se seu projeto possui uma especificação de task para servidor local você também pode utilizar o Gulp para inicializá-lo. O task deve se parecer com o conteúdo a seguir:

gulp.task('connect', function() {
  connect.server({
    root: '.',
    livereload: true
  })
});

Se você encontrar um task similar, execute-o para inicializar o servidor web:

gulp connect

O site estará então disponível no endereço padrão localhost:8080.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .