Всем привет! Возможно вопрос для опытных довольно глупый, но тем не менее, надеюсь на вашу помощь :) Буквально на днях начал использовать Gulp. Использую следующее: browser-sync eslint gulp gulp-autoprefixer gulp-clean gulp-clean-css gulp-concat gulp-debug gulp-favicons gulp-imagemin gulp-newer gulp-plumber gulp-rename gulp-replace gulp-rigger gulp-sass gulp-sourcemaps gulp-svg-sprites gulp-uglify gulp-watch imagemin-jpeg-recompress imagemin-pngquant. Если честно, разобрался не во всех, тем не менее. Всё работает, запускаю “gulp” в командной строке, в конечном итоге открывается localhost с работающим сайтом. В общем, столкнулся со следующей проблемой. Не пойму как изъять отсюда готовый проект годный к дальнейшему использованию. То есть, если запускать сайт не путем ввода “gulp” в командную строку, а просто запуская index.html в исходной папке “dest”, то стили и скрипты не читаются. Помогите решить проблему. Заранее спасибо!
Добро пожаловать. Все начинали, все там были.
Обычно есть команда для сборки проекта во время разработки. Если ты писал gulp-file самостоятельно, то ее может не быть. Если брал шаблон или автоматически сгенерированный, то такая команда должна быть. Она генерирует ресурсы, которые и являются конечным продуктом (собранные минифицированные скрипты, стили итд).
Использовал шаблон?
Кинь содержимое package.json и gulpfile.js. В package.json обычно выводятся основные команды а в gulpfile.js хранится описание конкретных шагов для сборки проекта.
Спасибо за ответ! Брал шаблон. Вот содержимое.
gulpfile.js :
global.$ = {
gulp: require(“gulp”),
browsersync: require(“browser-sync”).create(),
packageJson: require(’./package.json’),
autoprefixer: require(“gulp-autoprefixer”),
babel: require(“gulp-babel”),
uglify: require(“gulp-uglify”),
concat: require(“gulp-concat”),
sass: require(“gulp-sass”),
mincss: require(“gulp-clean-css”),
sourcemaps: require(“gulp-sourcemaps”),
rename: require(“gulp-rename”),
imagemin: require(“gulp-imagemin”),
pngquant: require(“imagemin-pngquant”),
imageminJpegRecompress: require(“imagemin-jpeg-recompress”),
favicons: require(“gulp-favicons”),
svgSprite: require(“gulp-svg-sprites”),
replace: require(“gulp-replace”),
rigger: require(“gulp-rigger”),
newer: require(“gulp-newer”),
plumber: require(“gulp-plumber”),
debug: require(“gulp-debug”),
watch: require(“gulp-watch”),
clean: require(“gulp-clean”),
path: {
tasks: require("./gulp/config.js")
}
};
$.path.tasks.forEach(function(taskPath) {
require(taskPath)();
});
// BUILD
$.gulp.task(“default”, $.gulp.series(“clean”, “sprite”,
$.gulp.parallel(“html”, “styles”, “favicons”, “images”, “scripts”, “server_conf”),
$.gulp.parallel(“watch”, “serve”)
));
package.json :
{
“name”: “Gulppack”,
“description”: “Frontend development with pleasure”,
“author”: “Andrey Gorokhov, Alexey Khabarovskii”,
“repository”: {
“type”: “git”,
“url”: “https://github.com/andreyalexeich/gulppack-scss.git”
},
“license”: “MIT”,
“devDependencies”: {
“@babel/core”: “^7.2.2”,
“@babel/preset-env”: “^7.2.3”,
“browser-sync”: “^2.26.3”,
“eslint”: “^5.12.0”,
“gulp”: “^4.0.0”,
“gulp-autoprefixer”: “^5.0.0”,
“gulp-babel”: “^8.0.0”,
“gulp-clean”: “^0.4.0”,
“gulp-clean-css”: “^3.10.0”,
“gulp-concat”: “^2.6.1”,
“gulp-debug”: “^3.2.0”,
“gulp-favicons”: “^2.3.0”,
“gulp-imagemin”: “^4.1.0”,
“gulp-newer”: “^1.4.0”,
“gulp-plumber”: “^1.2.1”,
“gulp-rename”: “^1.4.0”,
“gulp-replace”: “^0.6.1”,
“gulp-rigger”: “^0.5.8”,
“gulp-sass”: “^3.2.1”,
“gulp-sourcemaps”: “^2.6.4”,
“gulp-svg-sprites”: “^4.1.2”,
“gulp-uglify”: “^3.0.1”,
“gulp-watch”: “^5.0.1”,
“imagemin-jpeg-recompress”: “^5.1.0”,
“imagemin-pngquant”: “^5.1.0”
},
“dependencies”: {
“slick-carousel”: “^1.8.1”
}
}
У автора в репозитории тут написано что для сборки проекта надо запустить yarn run build. Пробовал такое?
Да, пробовал. Но выдает ошибку - “Command “build” not found. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.”
Как давно и как именно копировал репозиторий?
Я посмотрел историю проекта и там в старых версиях не было скрипта для сборки для продакшена. Например вот в версии 1.2 https://github.com/andreyalexeich/gulppack-scss/tree/1.2.0 нет секции scripts в package.json
В последний версиях проекта секция есть и есть скрипт для сборки для продакшена https://github.com/andreyalexeich/gulppack-scss/blob/1.4.1/package.json#L12
Попробуй скачать последнюю версию проекта, перенести свой код в нее и потом попробовать сделать продакшен сборку.