azorr
@azorr
программирую по мере возможности..

Как в новой редакции OptimizedHTML 5 подключать *.JS ??

Добрый!

Вопрос к людям которые используют сборку OptimizedHTML /v.2/v.3/v.4/v.5
Знаю, многие сталкнулись с проблемой сборки web-проектов, т.к. версии по своей структуре - прилично отличаются от версии к версии..

Сказать по правде мне пришлось "прыгать" с OptimizedHTML 2.0 сразу на 5-ю.. Всё пришлось пере подключать.. ((

Я уже понял как подключать по новому: fonts/$colors/bootstrup - для этого есть _config.sass (тут пока логично).

Но никак не пойму как подключать теперь библиотеки (JS - различных плагинов) и главное конечно common.js ???

Раньше, в gulpfile.js - была такая штука:

// Пользовательские скрипты проекта
gulp.task('common-js', function() {
	return gulp.src([
		'app/js/common.js',
		])
	.pipe(concat('common.min.js'))
	.pipe(uglify())
	.pipe(gulp.dest('app/js'));
});


и сразу за ней, такая удобная штука:

gulp.task('scripts', function() {
	return gulp.src([
		'./app/libs/modernizr/modernizr.js',
		'./app/libs/jquery/jquery-1.11.2.min.js',
		'./app/libs/waypoints/waypoints.min.js',
		'./app/libs/animate/animate-css.js',
		'./app/libs/Magnific-Popup/jquery.magnific-popup.min.js',
		'./app/libs/animateNumber/jquery.animateNumber.min.js',
		'./app/libs/equalHeights/equalHeights.min.js',
		'./app/libs/owl-carousel/owl.carousel.min.js',
		'./app/libs/selectize/dist/js/standalone/selectize.min.js',
		'./app/libs/parallax/parallax.min.js',
		'./app/libs/slider-simple/superslide.2.1.js'
		])
		.pipe(concat('libs.js'))
		.pipe(uglify()) //Minify libs.js
		.pipe(gulp.dest('./app/js/'));
});


Сейчас это выглядит так:

function scripts() {
	return src(paths.scripts.src)
	.pipe(concat(paths.jsOutputName))
	.pipe(uglify())
	.pipe(dest(paths.scripts.dest))
	.pipe(browserSync.stream())
}


Ни как не могу найти аналогий и адаптировать эту функцию под тот же функционал, котрый был раньше ((((((

В ранних версиях OptimizedHTML (я использовал 2.0) - рукописные скрипты компилировались в файл 'scripts.min.js' (для Watch и Build - соответсвенно).

Сейчас этого не происходит.((( Понятно, что Автор данного стартера по умолчанию всё отключил)))

У меня на старом компе стоит HTML Optimized 2.0 - и на нем приходится компилировать common.js и перекидывать его на новый комп уже в сжатом виде (файлик 'scripts.min.js').. конечно это не решение.. это костыль))

Кто знает/справился? Подскажите пожалуйста..

Как в новой редакции подключать *.JS ?? что бы всё опять конкатинировалось в файлик app.min.js ???
  • Вопрос задан
  • 101 просмотр
Решения вопроса 1
wapster92
@wapster92 Куратор тега JavaScript
Люблю трилогию ME
Мда.. Вообще этим инструментом не пользуюсь, но зашел на гитхаб посмотрел gulpfile и все ясно
scripts: {
		src: [
			// 'node_modules/jquery/dist/jquery.min.js', // npm vendor example (npm i --save-dev jquery)
			baseDir + '/js/app.js' // app.js. Always at the end
		],
		dest: baseDir + '/js',
	}

Комментарий этот пример подключения jquery. Набираешь в терминале npm i --save-dev jquery для установки, правда я без понятия зачем автор ставит флаг --save-dev, ну по сути в его сборке он вообще для своего прямого назначения не сработает. И нужно раскомментировать строку 'node_modules/jquery/dist/jquery.min.js', по такому же принципу подключаются остальные файлы, путь относительно gulpfile.
UPD для таких целей вообще удобно использовать модуль gulp-rigger, удобнее подключать сторонние скрипты и при их подключении не нужно перезагружать задачу.
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
@Froggyweb
function scripts() {
	return src(paths.scripts.src)
	.pipe(concat(paths.jsOutputName))
	.pipe(uglify())
	.pipe(dest(paths.scripts.dest))
	.pipe(browserSync.stream())
}


что мешает сюда paths.scripts.src подставить это полотенце?
но это так себе решение.
рекомендую прикрутить webpack к gulp. Gulp вообще не умеет с js, а в паре с вебпаком может быть очень даже.

на нем приходится компилировать common.js и перекидывать его на новый комп уже в сжатом виде (файлик 'scripts.min.js')

надеюсь не на дискетах? сарказм
Ответ написан
azorr
@azorr Автор вопроса
программирую по мере возможности..
OptimizedHTML - это и есть аналог webpack))

На счет "полотенца", видимо так и надо, но не соображу как именно:

тут есть такая конструкция:

let paths = {

	scripts: {
		src: [
			// 'node_modules/jquery/dist/jquery.min.js', // npm vendor example (npm i --save-dev jquery)
			baseDir + '/js/app.js' // app.js. Always at the end
		],
		dest: baseDir + '/js',
	},

	styles: {
		src:  baseDir + '/' + preprocessor + '/main.*',
		dest: baseDir + '/css',
	},

	images: {
		src:  baseDir + '/images/src/**/*',
		dest: baseDir + '/images/dest',
	},

	cssOutputName: 'app.min.css',
	jsOutputName:  'app.min.js',
}


Видимо автор подразумевал добавлять кастомные JS-скрипты типа такого:

baseDir + '/libs/Magnific-Popup/jquery.magnific-popup.min.js',
	baseDir + '/js/app.js' // app.js. Always at the end


но что то я упускаю... не "заводятся" скрипты..
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
06 июн. 2020, в 11:17
500 руб./за проект
06 июн. 2020, в 11:15
33333 руб./за проект
06 июн. 2020, в 10:32
7000 руб./за проект