Executing a package.json file

Question

Executing a package.json file

Navigation

#1 by (3 votes)

2

Well, I have a project that has

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"
}

I need to run the system locally. The system uses angularjs , node.js . It looks like it was installed with gulp , I think this is because it has a file in the repository called gulpfile.js .

When I open the page index.html the page looks like this:

Cananyonehelpmerunthissite?Ijustwanttoseethesitethewayitis.

index.htmlcode

<!DOCTYPEhtml><htmllang={{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><!--<scripttype="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>--><!--inject:js--><!--endinject--></head><bodyclass="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>

node.js npm

asked by anonymous 07.06.2017 / 11:15

1 answer

How to make a div hide when clicking off it with jQuery? I can not add new student to my arraylist

score 3 · Accepted Answer

The presence of a package.json file indicates that the project is a NPM package.

This file contains various data relevant to the project, such as its identification and dependencies, licenses and others. If you installed NodeJS on your machine, you probably have the NPM installed as well - it is part of the installation .

In your case, the package has several dependencies. To install them, type the following command in the directory where the package.json file is present:

npm install

Optionally, you can update the dependencies using the following command:

npm update

The presence of a gulpfile.js file indicates that the project uses Gulp as executor of tasks like processing SASS and CoffeeScript parsing. If you have not already installed it, this is the time.

In a Linux environment:

sudo npm install --global gulp

In a Windows environment:

npm install --global gulp

The --global parameter indicates that Gulp will be installed in the scope of the machine, not the project, making it available for use in other local projects.

Opening your gulp.js file you can see the tasks defined - for example:

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
});

To execute the task defined above, use the following command:

gulp js

If your project has a local server task specification you can also use Gulp to initialize it. The task should resemble the following content:

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

If you find a similar task, run it to initialize the web server:

gulp connect

The site will then be available in the default address localhost:8080 .