Skip to content

D
default2
Commit f34a8eb1 authored by Yuri Bondarenko's avatar Yuri Bondarenko
Browse files
Options

js, css

parent 45941335
Hide whitespace changes
Inline Side-by-side
Showing with 313 additions and 137 deletions
gulpfile.js
View file @ f34a8eb1
/**
* ===================== SETTINGS ========================
*/
/**
* Библиотеки CSS
*/
var libCSS = [
// 'src/assets/fonts/stylesheet.css',
// 'node_modules/bootstrap/dist/css/bootstrap.css'
];
/**
* Версии поддерживаемых браузеров
*/
var platform = [ 'last 4 versions', 'ie >= 11', 'iOS >= 9' ];
/* ======================================================== */
/* global require */
var gulp = require( 'gulp' ); // Собственно gulp
var pump = require( 'pump' ); // отслеживание ошибок
var concat = require( 'gulp-concat' ); // объединение набора файлов в один
var include = require( 'gulp-file-include' ); // включение файлов
var clean = require( 'gulp-clean' ); // удаление файлов и каталогов
var postcss = require( 'gulp-postcss' ); // Пост-обработка CSS
var postcssPresetEnv = require( 'postcss-preset-env' ); // CSS Next
var cssvariables = require('postcss-css-variables');
var cssvariables = require('postcss-css-variables'); // полифил для CSS-переменных
var atImport = require('postcss-import'); // парсинг и включение импорта CSS
var sourcemaps = require( 'gulp-sourcemaps' ); // карты исходного кода
var webpack = require( 'webpack-stream' );
......@@ -32,14 +19,52 @@ var compiler = require( 'webpack' );
var imagemin = require( 'gulp-image' ); // оптимизация картинок
var cache = require( 'gulp-cache' );
var include = require( 'gulp-file-include' ); // включение файлов
var browserSync = require( 'browser-sync' ).create(); // обновление налету
var clean = require( 'gulp-clean' ); // удаление файлов и каталогов
/* ========================================================== */
var browserSync = require( 'browser-sync' ).create(); // обновление налету
/**
* Библиотеки CSS
*/
const libCSS = [
// 'src/assets/fonts/stylesheet.css',
// 'node_modules/bootstrap/dist/css/bootstrap.css'
];
/**
* Настройки CSS
*/
const postcssOptions = [
atImport(),
postcssPresetEnv({
features: {
'custom-properties': false
},
stage: 0,
autoprefixer: {
grid: true,
browsers: [ 'last 4 versions', 'ie >= 11', 'iOS >= 9' ]
}
}),
cssvariables()
];
/**
* Сделать один CSS
*/
const isOneCSS = true;
/**
* Сделать один JS
*/
const isOneJS = true;
/* ================================================================= */
// ================== CLEAN ============================
// Полная очистка
/**
* CLEAN
* Полная очистка
*/
gulp.task( 'CLEAN', function( cb ){
pump([
gulp.src( [ './dev', './prod' ], { read: false } ),
......@@ -48,64 +73,46 @@ gulp.task( 'CLEAN', function( cb ){
});
// ================== LESS ============================
/**
* CSS
*/
gulp.task( 'dev:css', function( cb ){
// Собираем все CSS библиотеки
gulp.task( 'dev:css-libs', function( cb ){
pump( [
// Собираем вендорные либы
pump([
gulp.src( libCSS ),
concat( 'vendor.css' ),
gulp.dest( './dev/assets/css' )
], cb );
});
// Собираем CSS
gulp.task( 'dev:css', [ 'dev:css-libs' ], function( cb ){
// Настройки для вендорных префиксов
var plugins = [
postcssPresetEnv({
stage: 0
})
];
]);
// Собираем свои стили
pump([
gulp.src( './src/assets/less/*.less' ),
gulp.src( './src/assets/css/*.css' ),
sourcemaps.init(),
postcss( plugins ),
postcss( postcssOptions ),
sourcemaps.write( '.' ),
gulp.dest( './dev/assets/css' ),
browserSync.stream()
], cb );
});
// Собираем все CSS библиотеки
gulp.task( 'prod:css-libs', function( cb ){
// Собираем CSS
gulp.task( 'prod:css', function( cb ){
// Собираем вендорные либы
pump([
gulp.src( libCSS ),
concat( 'vendor.css' ),
gulp.dest( './docs/assets/css' )
], cb );
});
// Собираем CSS
gulp.task( 'prod:css', [ 'prod:css-libs' ], function( cb ){
// Настройки для вендорных префиксов
var plugins = [
postcssPresetEnv({
features: {
'custom-properties': false
},
stage: 0,
autoprefixer: { grid: true }
}),
cssvariables()
];
gulp.dest( './prod/assets/css' )
]);
// Собираем свои стили
pump([
gulp.src( './src/assets/css/*.css' ),
postcss( plugins ),
gulp.dest( './prod/assets/css' )
sourcemaps.init(),
postcss( postcssOptions ),
sourcemaps.write( '.' ),
gulp.dest( './prod/assets/css' ),
], cb );
});
......@@ -173,7 +180,7 @@ gulp.task('prod:img', function( cb ) {
cache(
imagemin()
),
gulp.dest( './docs/assets/img' )
gulp.dest( './prod/assets/img' )
], cb );
});
......@@ -198,24 +205,25 @@ gulp.task( 'dev:html', function( cb ){
}),
gulp.dest( './dev' )
], cb );
});
// Статичные файлы
gulp.task( 'dev:static', function( cb ){
pump([
gulp.src( [
'./src/favicon.ico',
'./src/robots.txt',
'./src/CNAME'
'./src/robots.txt'
] ),
gulp.dest( './dev' )
], cb );
});
// HTML для prod
gulp.task( 'prod:html', function( cb ){
pump([
gulp.src( ['./src/**/*.html', '!./src/assets/*.html', '!./src/components/**/*.html', './src/**/*.xml', './src/**/*.xsl'] ),
gulp.src([
'./src/**/*.html',
'!./src/assets/*.html',
'!./src/components/**/*.html'
]),
include({
prefix: '@@',
basepath: '@file',
......@@ -223,25 +231,23 @@ gulp.task( 'prod:html', function( cb ){
rev: +new Date
}
}),
gulp.dest( './docs' )
gulp.dest( './prod' )
], cb );
});
// Статичные файлы
gulp.task( 'prod:static', function( cb ){
pump([
gulp.src( [
'./src/favicon.ico',
'./src/robots.txt',
'./src/CNAME'
] ),
gulp.dest( './docs' )
], cb );
gulp.dest( './prod' )
]);
});
// ================== DEV ============================
// Слежение за dev
gulp.task( 'DEV', [ 'dev:img', 'dev:css', 'dev:js', 'dev:html', 'dev:static' ], function() {
gulp.task( 'DEV', [ 'dev:img', 'dev:css', 'dev:js', 'dev:html' ], function() {
browserSync.init({
server: {
......@@ -249,8 +255,8 @@ gulp.task( 'DEV', [ 'dev:img', 'dev:css', 'dev:js', 'dev:html', 'dev:static' ],
}
});
gulp.watch( './src/assets/less/*.less' , ['dev:css']);
gulp.watch( './src/components/**/*.less' , ['dev:css', 'dev:js']);
gulp.watch( './src/assets/css/*.css' , ['dev:css']);
gulp.watch( './src/components/**/*.css' , ['dev:css']);
gulp.watch( './src/assets/js/*.js', [ 'dev:js' ] );
gulp.watch( './src/components/**/*.js', [ 'dev:js' ] );
......@@ -271,6 +277,6 @@ gulp.task( 'DEV', [ 'dev:img', 'dev:css', 'dev:js', 'dev:html', 'dev:static' ],
// ================== PROD ============================
// Публикация на prod
gulp.task( 'PROD', [ 'prod:clean' ], function(){
gulp.start( 'prod:img', 'prod:css', 'prod:js', 'prod:html', 'prod:static' );
gulp.task( 'PROD', function(){
gulp.start( 'prod:img', 'prod:css', 'prod:js', 'prod:html' );
});
\ No newline at end of file
package-lock.json
View file @ f34a8eb1
......@@ -2584,6 +2584,16 @@
"integrity": "sha512-YfQ1tAUZm561vpYD+5eyWN8+UsceQbSrqqlc/6zDY2gtAE+uZLSdkkovhnGpmCThsvKBFakq4EdY/FF93E8XIw==",
"dev": true
},
"collect-stream": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/collect-stream/-/collect-stream-1.2.1.tgz",
"integrity": "sha1-gptBdGQxseJ+AebNPQrBY8IqHKc=",
"dev": true,
"requires": {
"concat-stream": "^1.2.0",
"once": "^1.3.0"
}
},
"collection-visit": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/collection-visit/-/collection-visit-1.0.0.tgz",
......@@ -6942,6 +6952,67 @@
}
}
},
"gulp-cssimport": {
"version": "7.0.0",
"resolved": "https://registry.npmjs.org/gulp-cssimport/-/gulp-cssimport-7.0.0.tgz",
"integrity": "sha512-ulnmFwJTY+i6f2b5sN4ePzCotwWKx8I68rwdBu7fRtVAj6QE+X0L2mUhUoXDcDBt4LVnOYhWtFBH3ETXGxDzTg==",
"dev": true,
"requires": {
"collect-stream": "^1.2.1",
"deep-extend": "^0.6.0",
"http-https": "^1.0.0",
"lodash.trim": "^4.5.1",
"lookup-path": "^0.3.1",
"magic-string": "^0.25.1",
"minimatch": "^3.0.4",
"pify": "^3.0.0",
"plugin-error": "^0.1.2",
"strip-bom": "^3.0.0",
"through2": "^2.0.3",
"vinyl": "^2.2.0",
"vinyl-sourcemaps-apply": "^0.2.1"
},
"dependencies": {
"clone": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
"integrity": "sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18=",
"dev": true
},
"clone-stats": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/clone-stats/-/clone-stats-1.0.0.tgz",
"integrity": "sha1-s3gt/4u1R04Yuba/D9/ngvh3doA=",
"dev": true
},
"replace-ext": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/replace-ext/-/replace-ext-1.0.0.tgz",
"integrity": "sha1-3mMSg3P8v3w8z6TeWkgMRaZ5WOs=",
"dev": true
},
"strip-bom": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
"integrity": "sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM=",
"dev": true
},
"vinyl": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/vinyl/-/vinyl-2.2.0.tgz",
"integrity": "sha512-MBH+yP0kC/GQ5GwBqrTPTzEfiiLjta7hTtvQtbxBgTeSXsmKQRQecjibMbxIXzVT3Y9KJK+drOz1/k+vsu8Nkg==",
"dev": true,
"requires": {
"clone": "^2.1.1",
"clone-buffer": "^1.0.0",
"clone-stats": "^1.0.0",
"cloneable-readable": "^1.0.0",
"remove-trailing-separator": "^1.0.1",
"replace-ext": "^1.0.0"
}
}
}
},
"gulp-decompress": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/gulp-decompress/-/gulp-decompress-1.2.0.tgz",
......@@ -7778,6 +7849,12 @@
}
}
},
"http-https": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/http-https/-/http-https-1.0.0.tgz",
"integrity": "sha1-L5CN1fHbQGjAWM1ubUzjkskTOJs=",
"dev": true
},
"http-proxy": {
"version": "1.15.2",
"resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.15.2.tgz",
......@@ -9168,6 +9245,12 @@
"lodash.escape": "^3.0.0"
}
},
"lodash.trim": {
"version": "4.5.1",
"resolved": "https://registry.npmjs.org/lodash.trim/-/lodash.trim-4.5.1.tgz",
"integrity": "sha1-NkJefukL5KpeJ7zruFt9EepHqlc=",
"dev": true
},
"log-symbols": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-2.2.0.tgz",
......@@ -9211,6 +9294,52 @@
"integrity": "sha512-TmYTeEYxiAmSVdpbnQDXGtvYOIRsCMg89CVZzwzc2o7GFL1CjoiRPjH5ec0NFAVlAx3fVof9dX/t6KKRAo2OWA==",
"dev": true
},
"lookup-path": {
"version": "0.3.1",
"resolved": "https://registry.npmjs.org/lookup-path/-/lookup-path-0.3.1.tgz",
"integrity": "sha1-pO8kEK4yZpr3AMTLfhsBCVCc8rg=",
"dev": true,
"requires": {
"debug": "^2.2.0",
"is-absolute": "^0.2.3"
},
"dependencies": {
"is-absolute": {
"version": "0.2.6",
"resolved": "https://registry.npmjs.org/is-absolute/-/is-absolute-0.2.6.tgz",
"integrity": "sha1-IN5p89uULvLYe5wto28XIjWxtes=",
"dev": true,
"requires": {
"is-relative": "^0.2.1",
"is-windows": "^0.2.0"
}
},
"is-relative": {
"version": "0.2.1",
"resolved": "https://registry.npmjs.org/is-relative/-/is-relative-0.2.1.tgz",
"integrity": "sha1-0n9MfVFtF1+2ENuEu+7yPDvJeqU=",
"dev": true,
"requires": {
"is-unc-path": "^0.1.1"
}
},
"is-unc-path": {
"version": "0.1.2",
"resolved": "https://registry.npmjs.org/is-unc-path/-/is-unc-path-0.1.2.tgz",
"integrity": "sha1-arBTpyVzwQJQ/0FqOBTDUXivObk=",
"dev": true,
"requires": {
"unc-path-regex": "^0.1.0"
}
},
"is-windows": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/is-windows/-/is-windows-0.2.0.tgz",
"integrity": "sha1-3hqm1j6indJIc3tp8f+LgALSEIw=",
"dev": true
}
}
},
"loose-envify": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
......@@ -9273,6 +9402,15 @@
"integrity": "sha512-mmLbumEYMi5nXReB9js3WGsB8UE6cDBWyIO62Z4DNx6GbRhDxHNjA1MlzSpJ2S2KM1wyiPRA0d19uHWYYvMHjA==",
"dev": true
},
"magic-string": {
"version": "0.25.1",
"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.1.tgz",
"integrity": "sha512-sCuTz6pYom8Rlt4ISPFn6wuFodbKMIHUMv4Qko9P17dpxb7s52KJTmRuZZqHdGmLCK9AOcDare039nRIcfdkEg==",
"dev": true,
"requires": {
"sourcemap-codec": "^1.4.1"
}
},
"make-dir": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/make-dir/-/make-dir-1.3.0.tgz",
......@@ -11157,6 +11295,31 @@
}
}
},
"postcss-import": {
"version": "12.0.1",
"resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-12.0.1.tgz",
"integrity": "sha512-3Gti33dmCjyKBgimqGxL3vcV8w9+bsHwO5UrBawp796+jdardbcFl4RP5w/76BwNL7aGzpKstIfF9I+kdE8pTw==",
"dev": true,
"requires": {
"postcss": "^7.0.1",
"postcss-value-parser": "^3.2.3",
"read-cache": "^1.0.0",
"resolve": "^1.1.7"
},
"dependencies": {
"postcss": {
"version": "7.0.6",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.6.tgz",
"integrity": "sha512-Nq/rNjnHFcKgCDDZYO0lNsl6YWe6U7tTy+ESN+PnLxebL8uBtYX59HZqvrj7YLK5UCyll2hqDsJOo3ndzEW8Ug==",
"dev": true,
"requires": {
"chalk": "^2.4.1",
"source-map": "^0.6.1",
"supports-color": "^5.5.0"
}
}
}
},
"postcss-initial": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/postcss-initial/-/postcss-initial-3.0.0.tgz",
......@@ -12123,6 +12286,23 @@
"readable-stream": "^2.0.0"
}
},
"read-cache": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
"integrity": "sha1-5mTvMRYRZsl1HNvo28+GtftY93Q=",
"dev": true,
"requires": {
"pify": "^2.3.0"
},
"dependencies": {
"pify": {
"version": "2.3.0",
"resolved": "http://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
"integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
"dev": true
}
}
},
"read-pkg": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz",
......@@ -13590,6 +13770,12 @@
"integrity": "sha1-PpNdfd1zYxuXZZlW1VEo6HtQhKM=",
"dev": true
},
"sourcemap-codec": {
"version": "1.4.4",
"resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.4.tgz",
"integrity": "sha512-CYAPYdBu34781kLHkaW3m6b/uUSyMOC2R61gcYMWooeuaGtjof86ZA/8T+qVPPt7np1085CR9hmMGrySwEc8Xg==",
"dev": true
},
"sparkles": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/sparkles/-/sparkles-1.0.1.tgz",
......
src/assets/css/app.css
View file @ f34a8eb1
@custom-media --viewport-medium (width <= 50rem);
/**
* Базовый CSS
*/
@custom-selector :--heading h1, h2, h3, h4, h5, h6;
:root {
--mainColor: #12345678;
}
body {
color: var(--mainColor);
font-family: system-ui;
overflow-wrap: break-word;
}
:--heading {
background-image: image-set(url(img/heading.png) 1x, url(img/heading@2x.png) 2x);
@media (--viewport-medium) {
margin-block: 0;
}
}
a {
color: rgb(0 0 100% / 90%);
&:hover {
color: rebeccapurple;
}
}
:root {
--global-color: #fff;
--global-color-hover: green;
--btn-color: var(--global-color);
--btn-color-hover: var(--global-color-hover);
}
.btn {
color: var(--btn-color);
}
.btn:hover {
color: var(--btn-color-hover); /* works */
}
.btn.hover {
color: var(--btn-color-hover); /* this does not work */
}
\ No newline at end of file
@import url('../../components/common/common.css');
@import url('../../components/button/button.css');
src/components/button/button.css 0 → 100644
View file @ f34a8eb1
:root {
--buttonText: #333;
--buttonBg: #999;
}
.button {
color: var(--buttonText);
background-color: var(--buttonBg);
font-family: var(--font);
}
\ No newline at end of file
src/components/common/common.css 0 → 100644
View file @ f34a8eb1
:root {
--font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
html {
font-size: 16px;
}
body {
padding: 0;
margin: 0;
font-family: var(--font);
font-size: 1rem;
}
\ No newline at end of file
src/components/header/index.html 0 → 100644
View file @ f34a8eb1
<div class="header">
<button class="button">Alert</button>
</div>
\ No newline at end of file
webpack.dev.js
View file @ f34a8eb1
......@@ -5,11 +5,7 @@
/* global module */
module.exports = {
mode: 'development',
entry: [ './src/assets/js/*.js' ],
output: {
filename: '[name].js',
},
// devtool: 'source-map',
devtool: 'source-map',
module: {
rules: [
{
......
webpack.prod.js
View file @ f34a8eb1
......@@ -5,9 +5,11 @@
/* global module */
module.exports = {
mode: 'production',
entry: [ './src/assets/js/app.js' ],
entry: {
app: './src/assets/js/app.js'
},
output: {
filename: '[name].js',
filename: '[name].js'
},
// devtool: 'source-map',
module: {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment