Skip to content

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

js

parent f34a8eb1
Show whitespace changes
Inline Side-by-side
Showing with 44 additions and 27 deletions
gulpfile.js
View file @ 8f88440b
/* ======================================================== */ /* ======================================================== */
/* global require */ /* global require */
var gulp = require( 'gulp' ); // Собственно gulp const gulp = require( 'gulp' ); // Собственно gulp
var pump = require( 'pump' ); // отслеживание ошибок const pump = require( 'pump' ); // отслеживание ошибок
var concat = require( 'gulp-concat' ); // объединение набора файлов в один const concat = require( 'gulp-concat' ); // объединение набора файлов в один
var include = require( 'gulp-file-include' ); // включение файлов const include = require( 'gulp-file-include' ); // включение файлов
var clean = require( 'gulp-clean' ); // удаление файлов и каталогов const clean = require( 'gulp-clean' ); // удаление файлов и каталогов
var postcss = require( 'gulp-postcss' ); // Пост-обработка CSS const postcss = require( 'gulp-postcss' ); // Пост-обработка CSS
var postcssPresetEnv = require( 'postcss-preset-env' ); // CSS Next const postcssPresetEnv = require( 'postcss-preset-env' ); // CSS Next
var cssvariables = require('postcss-css-variables'); // полифил для CSS-переменных const cssvariables = require('postcss-css-variables'); // полифил для CSS-переменных
var atImport = require('postcss-import'); // парсинг и включение импорта CSS const atImport = require('postcss-import'); // парсинг и включение импорта CSS
var sourcemaps = require( 'gulp-sourcemaps' ); // карты исходного кода const sourcemaps = require( 'gulp-sourcemaps' ); // карты исходного кода
var webpack = require( 'webpack-stream' ); const webpack = require( 'webpack-stream' );
var compiler = require( 'webpack' ); const compiler = require( 'webpack' );
var imagemin = require( 'gulp-image' ); // оптимизация картинок const imagemin = require( 'gulp-image' ); // оптимизация картинок
var cache = require( 'gulp-cache' ); const cache = require( 'gulp-cache' );
var browserSync = require( 'browser-sync' ).create(); // обновление налету const browserSync = require( 'browser-sync' ).create(); // обновление налету
/* ========================================================== */ /* ========================================================== */
...@@ -212,7 +212,7 @@ gulp.task( 'dev:html', function( cb ){ ...@@ -212,7 +212,7 @@ gulp.task( 'dev:html', function( cb ){
'./src/robots.txt' './src/robots.txt'
] ), ] ),
gulp.dest( './dev' ) gulp.dest( './dev' )
], cb ); ]);
}); });
...@@ -258,8 +258,8 @@ gulp.task( 'DEV', [ 'dev:img', 'dev:css', 'dev:js', 'dev:html' ], function() { ...@@ -258,8 +258,8 @@ gulp.task( 'DEV', [ 'dev:img', 'dev:css', 'dev:js', 'dev:html' ], function() {
gulp.watch( './src/assets/css/*.css' , ['dev:css']); gulp.watch( './src/assets/css/*.css' , ['dev:css']);
gulp.watch( './src/components/**/*.css' , ['dev:css']); gulp.watch( './src/components/**/*.css' , ['dev:css']);
gulp.watch( './src/assets/js/*.js', [ 'dev:js' ] ); gulp.watch( './src/assets/js/*.js', [ 'dev:js' ] ).on('change', browserSync.reload);
gulp.watch( './src/components/**/*.js', [ 'dev:js' ] ); gulp.watch( './src/components/**/*.js', [ 'dev:js' ] ).on('change', browserSync.reload);
gulp.watch( './dev/assets/js/**/*' ).on('change', browserSync.reload); gulp.watch( './dev/assets/js/**/*' ).on('change', browserSync.reload);
gulp.watch( './src/**/*.html', [ 'dev:html' ] ); gulp.watch( './src/**/*.html', [ 'dev:html' ] );
......
src/assets/js/app.js
View file @ 8f88440b
alert( import Button from '../../components/header';
() => {
console.log(1); const button = new Button();
} button.buttonAlert();
);
\ No newline at end of file // Comment
\ No newline at end of file
src/components/button/button.css
View file @ 8f88440b
:root { :root {
--buttonText: #333; --buttonText: #fff;
--buttonBg: #999; --buttonBg: #f00;
} }
.button { .button {
......
src/components/header/index.js 0 → 100644
View file @ 8f88440b
export default class Header {
buttonAlert() {
const button = document.querySelector( '.button' );
button.addEventListener( 'click', () => {
alert( `Message from button: ${button.innerHTML}` );
});
}
}
\ No newline at end of file
src/index.html
View file @ 8f88440b
...@@ -8,14 +8,15 @@ ...@@ -8,14 +8,15 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="/assets/css/index.css?@@rev" /> <link rel="stylesheet" href="/assets/css/app.css?@@rev" />
</head> </head>
<body> <body>
@@include( './components/header/index.html' )
<script src="https://cdn.polyfill.io/v2/polyfill.js?features=es6,fetch"></script>
<script src="/assets/js/app.js?@@rev" type="module"></script> <script src="/assets/js/app.js?@@rev" type="module"></script>
</body> </body>
......
webpack.dev.js
View file @ 8f88440b
...@@ -5,6 +5,12 @@ ...@@ -5,6 +5,12 @@
/* global module */ /* global module */
module.exports = { module.exports = {
mode: 'development', mode: 'development',
entry: {
app: './src/assets/js/app.js'
},
output: {
filename: '[name].js'
},
devtool: 'source-map', devtool: 'source-map',
module: { module: {
rules: [ rules: [
......
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