Ümit Tunç
196 lines
9.4 KiB
HTML
196 lines
9.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>Doc - Blogzine Theme</title>
|
|
<!-- Meta Tags -->
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
<meta name="author" content="Webestica.com">
|
|
|
|
<!-- Favicon -->
|
|
<link rel="shortcut icon" href="assets/images/favicon.ico">
|
|
|
|
<!-- Google Font -->
|
|
<link rel="preconnect" href="https://fonts.gstatic.com">
|
|
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;700&family=Rubik:wght@400;500;700&display=swap" rel="stylesheet">
|
|
|
|
<!-- Plugins CSS -->
|
|
<link rel="stylesheet" type="text/css" href="assets/vendor/font-awesome/css/all.min.css">
|
|
|
|
<!-- Theme CSS -->
|
|
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
|
|
<link rel="stylesheet" type="text/css" href="assets/css/doc.css">
|
|
<link rel="stylesheet" type="text/css" href="assets/css/prism.css">
|
|
<link rel="stylesheet" type="text/css" href="assets/vendor/glightbox/css/glightbox.css">
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<!-- **************** MAIN CONTENT START **************** -->
|
|
<main>
|
|
<!-- Navbar top START -->
|
|
<div class="navbar-top bg-dark px-3 px-sm-4 px-md-5">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<!-- Logo START -->
|
|
<a class="navbar-brand py-3" href="index.html">
|
|
<img class="navbar-brand-item" src="assets/images/logo.svg" alt="logo">
|
|
</a>
|
|
<!-- Logo END -->
|
|
|
|
<!-- Navbar right -->
|
|
<div>
|
|
<ul class="text-end list-inline m-0">
|
|
<li class="list-inline-item me-2 me-md-4"> <a class="text-white" href="https://blogzine.webestica.com">Live Preview</a> </li>
|
|
<li class="list-inline-item me-2 me-md-4"> <a class="text-white" href="https://support.webestica.com" target="_blank">Support</a> </li>
|
|
<li class="list-inline-item text-white"> <span class="badge bg-danger text-white">v1.2.0</span></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Navbar top END -->
|
|
|
|
<div class="container-fluid px-0">
|
|
<div class="page-wrapper">
|
|
<!-- Left sidebar START -->
|
|
<nav class="navbar navbar-expand-sm navbar-light bg-light px-3">
|
|
<a class="navbar-brand py-2 d-sm-none" href="#">Doc nav</a>
|
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#docNav" aria-controls="docNav" aria-expanded="false" aria-label="Toggle navigation">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
<div class="collapse navbar-collapse" id="docNav">
|
|
<div class="left-sidebar bg-light">
|
|
<div class="content h-100vh">
|
|
<div class="list-group list-group-borderless p-3 p-md-4">
|
|
<b class="text-dark text-uppercase mb-2">Getting Started</b>
|
|
<a class="list-group-item" href="index.html">Introduction</a>
|
|
<a class="list-group-item" href="gulp.html">Gulp</a>
|
|
<a class="list-group-item" href="customization.html">Customization</a>
|
|
<a class="list-group-item" href="color-scheme.html">Color Scheme</a>
|
|
<a class="list-group-item" href="logo-settings.html">Logo Settings</a>
|
|
<a class="list-group-item" href="page-loading.html">Page Loading</a>
|
|
<a class="list-group-item" href="fonts.html">Fonts</a>
|
|
<a class="list-group-item" href="dark-mode.html">Dark mode</a>
|
|
<a class="list-group-item" href="rtl.html">RTL Version</a>
|
|
<a class="list-group-item" href="lazy-load.html">Lazy Load</a>
|
|
<a class="list-group-item" href="sources-and-credits.html">Sources and Credits</a>
|
|
<a class="list-group-item" href="changelog.html">Changelog</a>
|
|
<a class="list-group-item" href="updates.html">Updates</a>
|
|
<a class="list-group-item" href="support.html">Support</a>
|
|
<b class="text-dark text-uppercase mt-3 mb-2">Component</b>
|
|
<a class="list-group-item" href="alerts.html">Alerts</a>
|
|
<a class="list-group-item" href="avatar.html">Avatar</a>
|
|
<a class="list-group-item" href="badges.html">Badges</a>
|
|
<a class="list-group-item" href="breadcrumb.html">Breadcrumb</a>
|
|
<a class="list-group-item" href="buttons.html">Buttons</a>
|
|
<a class="list-group-item" href="card.html">Card</a>
|
|
<a class="list-group-item" href="font-icons.html">Font icons</a>
|
|
<a class="list-group-item" href="google-map.html">Google Map</a>
|
|
<a class="list-group-item" href="nav-and-tabs.html">Nav and Tabs</a>
|
|
<a class="list-group-item" href="pagination.html">Pagination</a>
|
|
<a class="list-group-item" href="progress.html">Progress</a>
|
|
<a class="list-group-item" href="sticky-element.html">Sticky element</a>
|
|
<a class="list-group-item" href="sticky-footer.html">Sticky footer</a>
|
|
<a class="list-group-item" href="utility-classes.html">Utility classes</a>
|
|
<b class="text-dark text-uppercase mt-3 mb-2">Plugins</b>
|
|
<a class="list-group-item" href="tiny-slider.html">Tiny Slider</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<!-- Left sidebar END -->
|
|
|
|
<!-- Main content START -->
|
|
<div class="main-content">
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<!-- Page title -->
|
|
<div class="my-5">
|
|
<h1>Gulp</h1>
|
|
<p class="lead">Learn how to use the npm scripts included with blogzine to build, compile source code, and more.</p>
|
|
<hr class="my-5">
|
|
</div>
|
|
<!-- Page content START -->
|
|
|
|
<div class="alert alert-warning" role="alert">
|
|
<b>Note:</b> this step is completely optional. It aims for the advanced user who wants to speed up the development process with a professional Front-End toolset shipped with a theme. If you are not familiar with Gulp/SASS, You can also just prefer to work with a simple CSS method.
|
|
</div>
|
|
|
|
<!-- Inastall node content -->
|
|
<p>Gulp is a toolkit for automating painful or time-consuming tasks in your development workflow, so you can stop messing around and build something great in no time. Please follow the below steps to install and setup all essential:</p>
|
|
<h3 class="mt-5">1. Install node</h3>
|
|
<p>In order to use Gulp, you will need to download Node JS. If you don't have Node installed in your system, Please download the stable version of Node.js (LTS) NOT the latest.</p>
|
|
<a target="_blank" href="https://nodejs.org/en/" class="btn btn-primary">Download Node JS</a>
|
|
|
|
<!-- 2. Install Gulp.js Globally -->
|
|
<h3 class="mt-5">2. Install Gulp.js Globally</h3>
|
|
<p>After installing Node on your system you can proceed to Gulp installation. Simply run the command below in your terminal which will install Gulp globally.</p>
|
|
|
|
<div class="position-relative">
|
|
<pre id="copy-1" class="my-3">
|
|
<code class="language-markup" data-lang="html">npm install gulp-cli -g
|
|
</code></pre>
|
|
<button id="copy_id-1" data-clipboard-action="copy" data-clipboard-target="#copy-1" class="copy-link btn btn-primary btn-sm">Copy</button>
|
|
</div>
|
|
<p class="mt-3"><span class="badge bg-danger me-2">Note:</span> If you are using MacOS please use <code>sudo</code> keyword in the command because they need administrator rights to install Gulp globally. So full command will be <code>sudo npm install gulp-cli -g</code></p>
|
|
<img class="d-block img-fluid" src="assets/images/gulp_install_step1.png" alt="Gulp installation Step1">
|
|
<!-- Tab END -->
|
|
|
|
<!-- 3. Install NPM modules -->
|
|
<h3 class="mt-5">3. Install NPM modules</h3>
|
|
<p>First, change the command line path into your project where blogzine folder is located.</p>
|
|
<p>Once the path of your command line is changed to blogzine folder, you may run <code>package.json</code> file by using the following command:</p>
|
|
|
|
<div class="position-relative">
|
|
<pre id="copy-2" class="my-3">
|
|
<code class="language-markup" data-lang="html">npm install
|
|
</code></pre>
|
|
<button id="copy_id-2" data-clipboard-action="copy" data-clipboard-target="#copy-2" class="copy-link btn btn-primary btn-sm">Copy</button>
|
|
</div>
|
|
<img class="d-block img-fluid" src="assets/images/gulp_install_step2.png" alt="Gulp installation Step2">
|
|
<p class="my-4">It might take a couple of minutes depends on your Internet connection. After successful completion of <code>npm install</code> command, you will be able to see node_modules folder that Gulp created (Please refer to attached screenshot for final folders your project will contain). Everything is now installed and ready to go! </p>
|
|
<img class="d-block img-fluid" src="assets/images/files_after_gulp_install.png" alt="Gulp installed">
|
|
<!-- Tab END -->
|
|
|
|
<!-- 4. Running Gulp -->
|
|
<h3 class="mt-5">4. Running Gulp</h3>
|
|
<p>Now you're ready to start building new pages. All you have to do is run "gulp" in Terminal. This will track all the sass file changes and start a local webserver.</p>
|
|
|
|
<div class="position-relative">
|
|
<pre id="copy-3" class="my-3">
|
|
<code class="language-markup" data-lang="html">gulp
|
|
</code></pre>
|
|
<button id="copy_id-3" data-clipboard-action="copy" data-clipboard-target="#copy-3" class="copy-link btn btn-primary btn-sm">Copy</button>
|
|
</div>
|
|
|
|
<img class="d-block img-fluid" src="assets/images/how_to_run_gulp.png" alt="How to run Gulp from CMD">
|
|
|
|
<!-- Tab END -->
|
|
|
|
|
|
<!-- Page content END -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Main content END -->
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- =======================
|
|
JavaScripts -->
|
|
|
|
<!-- Bootstrap JS -->
|
|
<script src="assets/js/bootstrap.bundle.min.js"></script>
|
|
|
|
<script src="assets/js/simple-scrollbar.min.js"></script>
|
|
<script src="assets/js/prism.js"></script>
|
|
<script src="assets/js/clipboard.min.js"></script>
|
|
<script src="assets/vendor/glightbox/js/glightbox.js"></script>
|
|
|
|
<!-- Template Functions -->
|
|
<script src="assets/js/functions.js"></script>
|
|
|
|
</body>
|
|
</html> |