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

Question

[Алексей]

Добрый!

Вопрос к людям которые используют сборку 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 ???

Comments

[Михаил]

может у автора спросите?

[Алексей]

Михаил, спрашивал.. автор отвечает на такие вопросы раз в 2 года.. а может вообще не ответить..

[Антон Литвиненко]

Перейди на 4ю версию, лично мне 5я не зашла.

[Алексей]

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

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

[WapSter]

Чего? webpack это свершено другой инструмент со своими задачами. Gulp это task-ranner тобишь глупая обертка которая умеет запускать задачу.

[Алексей]

Окей, возможно так и есть.. webpack-ком не пользовался..
Но когда гуглил аналоги Gulp, выдавало webpack.. думал у них схожие функции)

[Алексей]

Спс дружище) Ровно так как ты написал!
Работает))
Для надёжности по отключал по 1-й библиотеке, всё чётко - идёт подключение нужных библиотек.
Я делал почти тоже самое, НО - всё пытался прикрутить путям baseDir, и это было ошибкой.
Тема закрыта)

Answer 1

[WapSter]

Мда.. Вообще этим инструментом не пользуюсь, но зашел на гитхаб посмотрел 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, удобнее подключать сторонние скрипты и при их подключении не нужно перезагружать задачу.

Comments

[Алексей]

Да, добрался до этой строки.. пробовал так:

let paths = {

	scripts: {

		src: [
			// 'node_modules/jquery/dist/jquery.min.js', // npm vendor example (npm i --save-dev jquery)

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

Не работает скрипт..

> Набираешь в терминале npm i --save-dev jquery

Вот мне к примеру нужно подключить скрипт для (jquery.magnific-popup.min.js)..

Нужно ли мне производить установку jquery - он же уже установлен?!

И нужно ли производить установку командой 'npm i magnific-popup и т.д. , если он уже лежит
в соответствующей папке: '/app/libs/Magnific-Popup/jquery.magnific-popup.min.js' ??

[WapSter]

Алексей, я то откуда знаю установлен у тебя jquery или нет.

И нужно ли производить установку командой 'npm i magnific-popup и т.д. , если он уже лежит

нет не нужно.

[WapSter]

Алексей, установил эту сборку дабы проверить. все работает как я и описал. Это ты делаешь, что-то не правильно.

[Алексей]

WapSter, Вот смотрите, мне нужно подключать JS-от этих (конкретно) плагинов:

это кусок от старого gulpfile.js (который после обновления всех пакетов 'node_modules' - больше не работает..)

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/'));
});

Поэтому, я взял свежую сборку OptimizedHTML 5 - и начал думать как эти же js-плагины там подключить?

Как бы вы подключали эти же плагины конкретно тут??

[WapSter]

scripts: {

    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',
      baseDir + '/js/app.js' // app.js. Always at the end
    ],
    dest: baseDir + '/js',
  },

[Алексей]

WapSter, спс, буду пробовать..

[Алексей]

Да, так и сделал - Работает! Спс!

Answer 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')

надеюсь не на дискетах? сарказм