v0.007
This commit is contained in:
Navan Chauhan
commit
f27b930331
|
|
@ -0,0 +1,138 @@
|
|||
<p align="center">
|
||||
<img src="https://uikitty.net/wp-content/uploads/2020/09/bootstrap-5-gulp-sasss.png" width="700" alt="Bootstrap 5 with Gulp boilerplate">
|
||||
</p>
|
||||
|
||||
<h3 align="center">Bootstrap 5 starter boilerplate with Gulp</h3>
|
||||
|
||||
## Environment for developing web projects on Bootstrap 5 + Gulp + SASS
|
||||
A ready-made environment for developing the frontend component of sites and admin interfaces on Bootstrap 5.
|
||||
|
||||
|
||||
## Environment requirements
|
||||
To create an environment, you must have the following tools installed:
|
||||
- Node.js
|
||||
- Git
|
||||
- Gulp
|
||||
|
||||
If you do not have these tools, you need to install them.
|
||||
|
||||
## Installing project dependencies
|
||||
To install project dependencies, enter the commands at the command line:
|
||||
- `npm install`
|
||||
- `bower install` (only for version 1.0.0)
|
||||
|
||||
## How to use the environment
|
||||
Normal mode: Enter `gulp` on the command line.
|
||||
Custom build: Enter the required task at the command line. For example, to build CSS, you must enter the command `css: build`. A list of all available tasks can be viewed in the gulpfile.js file.
|
||||
|
||||
___
|
||||
|
||||
## More Details
|
||||
|
||||
### Tool List
|
||||
The environment for developing a frontend project (site) is built on the basis of the following tools:
|
||||
|
||||
- Node.js (the environment in which the environment will run);
|
||||
- npm (the package manager included with Node.js; will be used to download Gulp, plugins and frontend packages);
|
||||
- Popover, Bootstrap 5 (packages that will be used to build css and js parts of the site);
|
||||
- Gulp and its plugins (will be used to build the project and perform other web tasks).
|
||||
|
||||
### Gulp project file structure
|
||||
The project file structure can be organized in different ways. This may depend both on the preferences of a particular developer and on the project for which it is being created.
|
||||
|
||||
In this article, we will adhere to the following structure:
|
||||
|
||||
The file structure of a Bootstrap 5 project built with Gulp
|
||||
|
||||
The "assets" folder and the "gulpfile.js", "package.json" files are located in the root of the project. The gulpfile.js file will contain the tasks for the Gulp project builder.
|
||||
|
||||
The first version of the project also used the ".bowerrc" and "bower.json" files. The file "bower.json" is the configuration file for the Bower manager, based on which the frontend packages required for loading were determined. In this project, it was used to load Bootstrap, jQuery and Popper.
|
||||
|
||||
There are two folders in the "assets" folder: "src" (for source files) and "build" (for finished files; the Gulp builder will put them in this folder). The "src" folder contains the "fonts" (for fonts), "img" (for source images), "js" (for js-files), "style" (for styles) and "template" (for HTML fragments) directories and the file "index.html".
|
||||
|
||||
In the first version of the project, the "src" folder also contained the "bower_components" directory. It was intended for components loaded with Bower. It is not in the current version.
|
||||
|
||||
There are two files in the "js" directory: "main.js" and "my.js". The file "my.js" is used to write your scripts, and "main.js" is used to define a list of files, the contents of which will need to be included in the final js file. The final is the file that should be output (in the "build" directory).
|
||||
|
||||
The "style" directory is reserved for styles. This directory contains three files: "main.scss" (contains a list of files, the contents of which must be included in the resulting stylesheet), "my.scss" (used to write custom styles) and "variables.scss" (contains SCSS variables, with which we will change the styles of Bootstrap 5, as well as use it to create our variables).
|
||||
|
||||
The "index.html" file is the main page of the project being created. Besides "index.html" other html pages can be placed in this directory.
|
||||
|
||||
The "template" directory is intended for placing fragments of HTML pages into it. For example, in this directory you can create files "head.html" and "footer.html", and import their contents (using the syntax // = path_to_file) into several pages at once. This will make it easier to create and edit html pages, because separate parts of the pages will already be in separate files.
|
||||
|
||||
### Import Bootstrap 5 sources to the project and configuring them
|
||||
|
||||
There are different ways to connect the Bootstrap 5 framework to a project, as well as options for working with it.
|
||||
|
||||
The most flexible option is to use source codes. In this case, you can not only very easily change the default Bootstrap styles, but also connect to the project only those classes and components that will be used in it.
|
||||
|
||||
Bootstrap 5 CSS source codes are written in SCSS language and presented through a large number of small files.
|
||||
|
||||
List of SCSS files (located in the "node_modules / bootstrap / scss /" directory): "functions.scss", "variables.scss", "mixins.scss", "variables.scss", "print.scss", "reboot. scss "," type.scss "," images.scss "," code.scss "," grid.scss "," tables.scss "," forms.scss "," buttons.scss "," transitions.scss " , "dropdown.scss", etc.
|
||||
|
||||
Each such file either performs a certain service task, or is responsible for styling a certain function of the framework or component. SCSS files have short and meaningful names. Using only them, you can quite accurately understand the purpose of each of them.
|
||||
|
||||
Customizing or changing the default Bootstrap 5 styles is done by overriding the values of the SCSS variables. All SCSS variables are collected in one place for convenience (in the "variables.scss" file). But, it is desirable to override their values, of course, not in this file, but in your own (for example, having the same name "variables.scss", but located in "assets / style / variables.scss").
|
||||
|
||||
For example, changing the color of the success and danger themes is done by changing the values of the $ green and $ red variables:
|
||||
|
||||
```
|
||||
// Override the default values of Bootstrap 5 variables
|
||||
$ red: #cc2eaa;
|
||||
$ green: #2ecc71;
|
||||
```
|
||||
|
||||
Please note that after copying Bootstrap 5 variables into your CSS file ("assets/style/variables.scss"), you need to uncheck them !default.
|
||||
|
||||
The SCSS file "assets / style / main.scss" specifies which Bootstrap 5 SCSS source files should and should not be compiled into CSS. In other words, it is the contents of this file that we will define the set of styles that, after compilation, will be connected to the web page.
|
||||
|
||||
In addition, the files "assets / style / variables.scss" (for redefining Bootstrap variables) and "assets / style / my.scss" (for creating custom styles) are also connected to this file.
|
||||
|
||||
Content of the file "main.scss" (example):
|
||||
|
||||
```
|
||||
// Overriding Bootstrap 5 default variable values and defining your own
|
||||
@import "variables";
|
||||
|
||||
// Connect the SCSS sources of Bootstrap 5
|
||||
@import "../../../node_modules/bootstrap/scss/_functions";
|
||||
@import "../../../node_modules/bootstrap/scss/_variables";
|
||||
@import "../../../node_modules/bootstrap/scss/_mixins";
|
||||
@import "../../../node_modules/bootstrap/scss/_root";
|
||||
@import "../../../node_modules/bootstrap/scss/_reboot";
|
||||
@import "../../../node_modules/bootstrap/scss/_type";
|
||||
@import "../../../node_modules/bootstrap/scss/_images";
|
||||
@import "../../../node_modules/bootstrap/scss/_code";
|
||||
```
|
||||
In addition, some of Bootstrap 5's components require JavaScript to work.
|
||||
|
||||
List of Bootstrap 5 js files (located in the "node_modules/bootstrap/js/dist/" directory): "util.js", "alert.js", "button.js", "carousel.js", "collapse.js "," dropdown.js "," modal.js "," tooltip.js "," popover.js "," scrollspy.js "," tab.js ", and" toast.js ".
|
||||
|
||||
Determining which Bootstrap 5 js files need to be included in the final project js file and which not is done through "main.js".
|
||||
|
||||
Importing the necessary files into the resulting build / main.js is done using the following construction:
|
||||
|
||||
`// = path_to_file`
|
||||
|
||||
The Gulp plugin "gulp-rigger" will perform this action. How to install and connect it will be described below.
|
||||
|
||||
You can also import Popper into this file (required for Dropdown, Tooltip and Popover components) and, if necessary, your own js files.
|
||||
|
||||
The content of the file "main.js" (example):
|
||||
|
||||
```
|
||||
// Import Popper
|
||||
//= ../../../node_modules/popper.js/dist/umd/popper.js
|
||||
|
||||
// Import Bootstrap 5 js-files
|
||||
//= ../../../node_modules/bootstrap/js/dist/util.js
|
||||
//= ../../../node_modules/bootstrap/js/dist/alert.js
|
||||
//= ../../../node_modules/bootstrap/js/dist/button.js
|
||||
//= ../../../node_modules/bootstrap/js/dist/carousel.js
|
||||
//= ../../../node_modules/bootstrap/js/dist/collapse.js
|
||||
```
|
||||
|
||||
Thanks a lot [itchef](https://github.com/itchief) for [article](https://itchief.ru/bootstrap/build-project-with-gulp-v4) and boilerplate with gulp and bootstrap 4!
|
||||
Bootstrap 5 starter boilerplate with Gulp was made due to the pattern [itchief repository](https://github.com/itchief/gulp-project-bootstrap-4). It was modified and updated to the bootstrap 5.
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
# Ignore everything in this directory
|
||||
*
|
||||
# Except this file
|
||||
!.gitignore
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
# Ignore everything in this directory
|
||||
*
|
||||
# Except this file
|
||||
!.gitignore
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<!doctype html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
//= template/head.html
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
//= template/navbar.html
|
||||
<section class="py-5 text-center container">
|
||||
<div class="row py-lg-5">
|
||||
<div class="col-lg-6 col-md-8 mx-auto">
|
||||
<h1 class="font-weight-light">Doge420</h1>
|
||||
<p class="lead text-muted">My teacher said to my I'm a failure, that I'll never amount to anything. I scoffed at him. Shocked, my teacher asked what's so funny, my future is on the line. "Well...you see professor" I say as the teacher prepares to laugh at my answer, rebuttal at hand. "I watch Rick and Morty." The class is shocked, they merely watch pleb shows like the big bang theory to feign intelligence, not grasping the humor. "...how? I can't even understand it's sheer nuance and subtlety." "Well you see...WUBBA LUBBA DUB DUB!" One line student laughs in the back, I turn to see a who this fellow genius is. It's none other than Albert Einstein.</p>
|
||||
<p>
|
||||
<a href="#" class="btn btn-primary my-2">Do Nothing</a>
|
||||
<a href="#" class="btn btn-secondary my-2">Do Nothing, in Grey</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
//= template/drug-form.html
|
||||
|
||||
//= template/analyse.html
|
||||
|
||||
</main>
|
||||
//= template/footer.html
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
Binary file not shown.
|
|
@ -0,0 +1,61 @@
|
|||
// import Popper
|
||||
//= ../../../node_modules/popper.js/dist/umd/popper.js
|
||||
|
||||
// import required js-files Bootstrap 5
|
||||
//= ../../../node_modules/bootstrap/js/dist/alert.js
|
||||
//= ../../../node_modules/bootstrap/js/dist/button.js
|
||||
//= ../../../node_modules/bootstrap/js/dist/carousel.js
|
||||
//= ../../../node_modules/bootstrap/js/dist/collapse.js
|
||||
//= ../../../node_modules/bootstrap/js/dist/dropdown.js
|
||||
//= ../../../node_modules/bootstrap/js/dist/modal.js
|
||||
//= ../../../node_modules/bootstrap/js/dist/popover.js
|
||||
//= ../../../node_modules/bootstrap/js/dist/scrollspy.js
|
||||
//= ../../../node_modules/bootstrap/js/dist/tab.js
|
||||
//= ../../../node_modules/bootstrap/js/dist/toast.js
|
||||
//= ../../../node_modules/bootstrap/js/dist/tooltip.js
|
||||
|
||||
function bruh_moment(){
|
||||
alert('this is a bruh moment')
|
||||
}
|
||||
|
||||
function get_smiles_from_element_text(el_id){
|
||||
var inputVal = document.getElementById(el_id).value;
|
||||
let url = `https://pubchem.ncbi.nlm.nih.gov/rest/pug/compound/name/${inputVal}/property/CanonicalSMILES/JSON`;
|
||||
console.log(url)
|
||||
fetch(url)
|
||||
.then(res => res.json())
|
||||
.then((out) => {
|
||||
console.log('Aye, got that dub from PubChem');
|
||||
//console.log(out["PropertyTable"]["Properties"][0]["CanonicalSMILES"])
|
||||
document.getElementById("inputSMILES").value = out["PropertyTable"]["Properties"][0]["CanonicalSMILES"]
|
||||
})
|
||||
.catch(err => {
|
||||
bruh_moment()
|
||||
throw err });
|
||||
}
|
||||
|
||||
|
||||
function draw_me_like_one_of_your_french_girls(mol){
|
||||
|
||||
mol.condense_abbreviations();
|
||||
var canvas = document.getElementById("draw-canvas-2");
|
||||
mol.draw_to_canvas(canvas, -1, -1);
|
||||
}
|
||||
|
||||
|
||||
function calculate_and_disperse(mol){
|
||||
var descrs = JSON.parse(mol.get_descriptors());
|
||||
document.getElementById('exactmw').textContent = descrs["exactmw"];
|
||||
document.getElementById('CrippenMR').textContent = descrs["CrippenMR"];
|
||||
document.getElementById('CrippenClogP').textContent = descrs["CrippenClogP"];
|
||||
|
||||
|
||||
}
|
||||
|
||||
function analyse_me_senpai(smile_pwiz) {
|
||||
var smiles = document.getElementById(smile_pwiz).value;
|
||||
var mol = Module.get_mol(smiles);
|
||||
draw_me_like_one_of_your_french_girls(mol);
|
||||
calculate_and_disperse(mol);
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
// Overriding Bootstrap 5 default variable values and defining your own
|
||||
@import "variables";
|
||||
|
||||
// Include the necessary SCSS sources Bootstrap 5
|
||||
@import "../../../node_modules/bootstrap/scss/_functions";
|
||||
@import "../../../node_modules/bootstrap/scss/_variables";
|
||||
@import "../../../node_modules/bootstrap/scss/_mixins";
|
||||
@import "../../../node_modules/bootstrap/scss/_utilities";
|
||||
@import "../../../node_modules/bootstrap/scss/_root";
|
||||
@import "../../../node_modules/bootstrap/scss/_reboot";
|
||||
@import "../../../node_modules/bootstrap/scss/_type";
|
||||
@import "../../../node_modules/bootstrap/scss/_images";
|
||||
@import "../../../node_modules/bootstrap/scss/_containers";
|
||||
@import "../../../node_modules/bootstrap/scss/_grid";
|
||||
@import "../../../node_modules/bootstrap/scss/_tables";
|
||||
@import "../../../node_modules/bootstrap/scss/_forms";
|
||||
@import "../../../node_modules/bootstrap/scss/_buttons";
|
||||
@import "../../../node_modules/bootstrap/scss/_transitions";
|
||||
@import "../../../node_modules/bootstrap/scss/_dropdown";
|
||||
@import "../../../node_modules/bootstrap/scss/_button-group";
|
||||
@import "../../../node_modules/bootstrap/scss/_nav";
|
||||
@import "../../../node_modules/bootstrap/scss/_navbar";
|
||||
@import "../../../node_modules/bootstrap/scss/_card";
|
||||
@import "../../../node_modules/bootstrap/scss/_breadcrumb";
|
||||
@import "../../../node_modules/bootstrap/scss/_pagination";
|
||||
@import "../../../node_modules/bootstrap/scss/_badge";
|
||||
@import "../../../node_modules/bootstrap/scss/_alert";
|
||||
@import "../../../node_modules/bootstrap/scss/_progress";
|
||||
@import "../../../node_modules/bootstrap/scss/_list-group";
|
||||
@import "../../../node_modules/bootstrap/scss/_close";
|
||||
@import "../../../node_modules/bootstrap/scss/_toasts";
|
||||
@import "../../../node_modules/bootstrap/scss/_modal";
|
||||
@import "../../../node_modules/bootstrap/scss/_tooltip";
|
||||
@import "../../../node_modules/bootstrap/scss/_popover";
|
||||
@import "../../../node_modules/bootstrap/scss/_carousel";
|
||||
@import "../../../node_modules/bootstrap/scss/_spinners";
|
||||
@import "../../../node_modules/bootstrap/scss/_helpers";
|
||||
|
||||
// Utilities
|
||||
@import "../../../node_modules/bootstrap/scss/utilities/_api.scss";
|
||||
|
||||
|
||||
|
||||
// Include your SCSS files
|
||||
@import "my";
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
// Variables Bootstrap 5
|
||||
|
||||
$red: #cc2eaa;
|
||||
$green: #2ecc71;
|
||||
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<div class='container'>
|
||||
<div class='row'><h2>Workbench</h2></div>
|
||||
<div class='row'>
|
||||
<div class='col-6'>
|
||||
<canvas id="draw-canvas-2" class="w-100"></canvas>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<table class="table table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">#</th>
|
||||
<th scope="col">Property</th>
|
||||
<th scope="col">Value</th>
|
||||
<th scope="col">Reference</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">1</th>
|
||||
<td>Exact M.W.</td>
|
||||
<td id="exactmw">-</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">2</th>
|
||||
<td>CrippenMR</td>
|
||||
<td id='CrippenMR'>-</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">3</th>
|
||||
<td>CrippenClogP</td>
|
||||
<td id='CrippenClogP'>-</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<div class="full-width bg-secondary text-light">
|
||||
<div class="container">
|
||||
<div class="mb-3">
|
||||
<h2>Drug</h2>
|
||||
<p >Ok so people can’t have opinions, the people on this sub are the reason there are instructions on toothpaste. Everyone here are cancerous sheep who have been mind controlled to upvoting if they see a 69, 420, Instagram Fortnite and TikTok bad Minecraft good. I’m not saying I like any of these more than Minecraft but people are allowed to have opinions. So next time you call someone a normie realize who the real normie is🤡</p>
|
||||
<div class='col-12'>
|
||||
<form>
|
||||
<label for="inputName" class="form-label">Compound Name</label>
|
||||
<input type="text" class="form-control" id="inputName" aria-describedby="Compound Name">
|
||||
<button type="button" class="btn btn-primary" onclick="get_smiles_from_element_text('inputName')">Get SMILES</button>
|
||||
</form>
|
||||
</div>
|
||||
<div class='col-12'>
|
||||
<form>
|
||||
<label for="inputSMILES" class="form-label">Compound SMILES</label>
|
||||
<input type="text" class="form-control" id="inputSMILES" aria-describedby="Compound SMILES">
|
||||
<button type="button" class="btn btn-primary" onclick="analyse_me_senpai('inputSMILES')">Analyse</button>
|
||||
</form></div>
|
||||
|
||||
|
||||
|
||||
</div></div></div>
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
<script src="./js/main.min.js"></script>
|
||||
<script src="./js/RDKit_minimal.js"></script>
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
|
||||
<link rel="stylesheet" href="css/main.min.css">
|
||||
|
||||
<title>Doge420</title>
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
|
||||
<nav class="navbar navbar-dark bg-dark">
|
||||
<a class="navbar-brand" href="#">
|
||||
<img src="./img/doge420logo.png" width="30" height="30" class="d-inline-block align-top" alt="Lord Doge smoking a blunt">
|
||||
Doge420
|
||||
</a>
|
||||
</nav>
|
||||
|
|
@ -0,0 +1,166 @@
|
|||
'use strict';
|
||||
|
||||
/* paths to source files (src), to ready files (build), as well as to those whose changes need to be monitored (watch) */
|
||||
var path = {
|
||||
build: {
|
||||
html: 'assets/build/',
|
||||
js: 'assets/build/js/',
|
||||
wasm: 'assets/build/js',
|
||||
css: 'assets/build/css/',
|
||||
img: 'assets/build/img/',
|
||||
fonts: 'assets/build/fonts/'
|
||||
},
|
||||
src: {
|
||||
html: 'assets/src/*.html',
|
||||
js: 'assets/src/js/*.js',
|
||||
style: 'assets/src/style/main.scss',
|
||||
img: 'assets/src/img/**/*.*',
|
||||
fonts: 'assets/src/fonts/**/*.*',
|
||||
wasm: 'assets/src/js/*.wasm'
|
||||
},
|
||||
watch: {
|
||||
html: 'assets/src/**/*.html',
|
||||
js: 'assets/src/js/**/*.js',
|
||||
css: 'assets/src/style/**/*.scss',
|
||||
img: 'assets/src/img/**/*.*',
|
||||
fonts: 'assets/srs/fonts/**/*.*'
|
||||
},
|
||||
clean: './assets/build/*'
|
||||
};
|
||||
|
||||
/* настройки сервера */
|
||||
var config = {
|
||||
server: {
|
||||
baseDir: './assets/build'
|
||||
},
|
||||
notify: false
|
||||
};
|
||||
|
||||
/* include gulp and plugins */
|
||||
var gulp = require('gulp'), // include Gulp
|
||||
webserver = require('browser-sync'), // server for work and automatic page updates
|
||||
plumber = require('gulp-plumber'), // bug tracking module
|
||||
rigger = require('gulp-rigger'), // a module to import the contents of one file into another
|
||||
sourcemaps = require('gulp-sourcemaps'), // module for generating a map of source files
|
||||
sass = require('gulp-sass'), // module for compiling SASS (SCSS) to CSS
|
||||
autoprefixer = require('gulp-autoprefixer'), // module for automatic installation of auto-prefixes
|
||||
cleanCSS = require('gulp-clean-css'), // CSS minification plugin
|
||||
uglify = require('gulp-uglify'), // JavaScript minification module
|
||||
cache = require('gulp-cache'), // module for caching
|
||||
imagemin = require('gulp-imagemin'), // plugin for compressing PNG, JPEG, GIF and SVG images
|
||||
jpegrecompress = require('imagemin-jpeg-recompress'), // jpeg compression plugin
|
||||
pngquant = require('imagemin-pngquant'), // png compression plugin
|
||||
del = require('del'), // plugin for deleting files and directories
|
||||
rename = require('gulp-rename');
|
||||
|
||||
/* tasks */
|
||||
|
||||
// start the server
|
||||
gulp.task('webserver', function () {
|
||||
webserver(config);
|
||||
});
|
||||
|
||||
// compile html
|
||||
gulp.task('html:build', function () {
|
||||
return gulp.src(path.src.html) // selection of all html files in the specified path
|
||||
.pipe(plumber()) // error tracking
|
||||
.pipe(rigger()) // attachment import
|
||||
.pipe(gulp.dest(path.build.html)) // uploading ready files
|
||||
.pipe(webserver.reload({ stream: true })); // server reboot
|
||||
});
|
||||
|
||||
// compile styles
|
||||
gulp.task('css:build', function () {
|
||||
return gulp.src(path.src.style) // get main.scss
|
||||
.pipe(plumber()) // for bug tracking
|
||||
.pipe(sourcemaps.init()) // initialize sourcemap
|
||||
.pipe(sass()) // scss -> css
|
||||
.pipe(autoprefixer()) // add prefix
|
||||
.pipe(gulp.dest(path.build.css))
|
||||
.pipe(rename({ suffix: '.min' }))
|
||||
.pipe(cleanCSS()) // minimize CSS
|
||||
.pipe(sourcemaps.write('./')) // write sourcemap
|
||||
.pipe(gulp.dest(path.build.css)) // output to build
|
||||
.pipe(webserver.reload({ stream: true })); // server restart
|
||||
});
|
||||
|
||||
// compile js
|
||||
gulp.task('js:build', function () {
|
||||
return gulp.src(path.src.js) // get file main.js
|
||||
.pipe(plumber()) // for bug tracking
|
||||
.pipe(rigger()) // import all files to main.js
|
||||
.pipe(gulp.dest(path.build.js))
|
||||
.pipe(rename({ suffix: '.min' }))
|
||||
.pipe(sourcemaps.init()) //initialize sourcemap
|
||||
.pipe(uglify()) // minimize js
|
||||
.pipe(sourcemaps.write('./')) // write sourcemap
|
||||
.pipe(gulp.dest(path.build.js)) // put ready file
|
||||
.pipe(webserver.reload({ stream: true })); // server restart
|
||||
});
|
||||
|
||||
gulp.task('wasm:build', function () {
|
||||
return gulp.src(path.src.wasm)
|
||||
.pipe(gulp.dest(path.build.wasm))
|
||||
.pipe(webserver.reload({stream: true}))
|
||||
});
|
||||
|
||||
// move fonts
|
||||
gulp.task('fonts:build', function () {
|
||||
return gulp.src(path.src.fonts)
|
||||
.pipe(gulp.dest(path.build.fonts));
|
||||
});
|
||||
|
||||
// image processing
|
||||
gulp.task('image:build', function () {
|
||||
return gulp.src(path.src.img) // path to image source
|
||||
.pipe(cache(imagemin([ // image compression
|
||||
imagemin.gifsicle({ interlaced: true }),
|
||||
jpegrecompress({
|
||||
progressive: true,
|
||||
max: 90,
|
||||
min: 80
|
||||
}),
|
||||
pngquant(),
|
||||
imagemin.svgo({ plugins: [{ removeViewBox: false }] })
|
||||
])))
|
||||
.pipe(gulp.dest(path.build.img)); // output ready files
|
||||
});
|
||||
|
||||
// remove catalog build
|
||||
gulp.task('clean:build', function () {
|
||||
return del(path.clean);
|
||||
});
|
||||
|
||||
// clear cache
|
||||
gulp.task('cache:clear', function () {
|
||||
cache.clearAll();
|
||||
});
|
||||
|
||||
// assembly
|
||||
gulp.task('build',
|
||||
gulp.series('clean:build',
|
||||
gulp.parallel(
|
||||
'html:build',
|
||||
'css:build',
|
||||
'js:build',
|
||||
'fonts:build',
|
||||
'image:build',
|
||||
'wasm:build'
|
||||
)
|
||||
)
|
||||
);
|
||||
|
||||
// launching tasks when files change
|
||||
gulp.task('watch', function () {
|
||||
gulp.watch(path.watch.html, gulp.series('html:build'));
|
||||
gulp.watch(path.watch.css, gulp.series('css:build'));
|
||||
gulp.watch(path.watch.js, gulp.series('js:build'));
|
||||
gulp.watch(path.watch.img, gulp.series('image:build'));
|
||||
gulp.watch(path.watch.fonts, gulp.series('fonts:build'));
|
||||
});
|
||||
|
||||
// default tasks
|
||||
gulp.task('default', gulp.series(
|
||||
'build',
|
||||
gulp.parallel('webserver','watch')
|
||||
));
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,32 @@
|
|||
{
|
||||
"name": "project-on-bootstrap-5",
|
||||
"version": "1.0.0",
|
||||
"description": "bootstrap-5",
|
||||
"author": "pabloNAX",
|
||||
"license": "MIT",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git@github.com:PabloNAX/Bootstrap-5-starter-boilerplate-with-Gulp.git"
|
||||
},
|
||||
"dependencies": {
|
||||
"bootstrap": "^5.0.0-alpha1",
|
||||
"popper.js": "^1.16.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"browser-sync": "~2.26.7",
|
||||
"del": "~5.1.0",
|
||||
"gulp": "~4.0.2",
|
||||
"gulp-autoprefixer": "~7.0.1",
|
||||
"gulp-cache": "~1.1.3",
|
||||
"gulp-clean-css": "~4.3.0",
|
||||
"gulp-imagemin": "~7.1.0",
|
||||
"gulp-plumber": "~1.2.1",
|
||||
"gulp-rename": "~2.0.0",
|
||||
"gulp-rigger": "~0.5.8",
|
||||
"gulp-sass": "~4.0.2",
|
||||
"gulp-sourcemaps": "~2.6.5",
|
||||
"gulp-uglify": "~3.0.2",
|
||||
"imagemin-jpeg-recompress": "~6.0.0",
|
||||
"imagemin-pngquant": "~8.0.0"
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue