Как запустить Gulp на простеньком проекте?

Question

[RESURT]

Верстальщик прислал бекэнду такой вот проект, подскажите не сведущему, как его запустить?
npm install сделан

Comments

[GeminiX]

что в package.json scripts?

[RESURT]

Александр,

"private": true,
	"type": "module",
	"scripts": {
		"test": "echo \"Error: no test specified\" && exit 1",
		"surge": "surge --project ./dist --domain funsun.surge.sh"
	},
	"author": "Vyacheslav",
	"license": "ISCA",
	"devDependencies": {
		"@babel/core": "^7.17.0",
		"@babel/preset-env": "^7.16.11",
		"ansi-colors": "^4.1.1",
		"babel-loader": "^8.2.3",
		"babel-preset-latest": "^6.24.1",
		"browser-sync": "^2.27.7",
		"del": "^6.0.0",
		"gulp": "^4.0.2",
		"gulp-autoprefixer": "^8.0.0",
		"gulp-babel": "^8.0.0",
		"gulp-clean-css": "^4.3.0",
		"gulp-file-include": "^2.3.0",
		"gulp-group-css-media-queries": "^1.2.2",
		"gulp-imagemin": "^8.0.0",
		"gulp-pug": "^5.0.0",
		"gulp-pugbem": "^2.2.4",
		"gulp-rename": "^2.0.0",
		"gulp-sass": "^5.0.0",
		"gulp-typescript": "^6.0.0-alpha.1",
		"gulp-uglify-es": "^3.0.0",
		"imagemin-mozjpeg": "^9.0.0",
		"imagemin-optipng": "^8.0.0",
		"imagemin-svgo": "^10.0.0",
		"sass": "^1.37.5",
		"typescript": "^4.5.2"
	},
	"name": "funsun",
	"version": "1.0.0",
	"main": "gulpfile.js",
	"keywords": [],
	"description": "",
	"dependencies": {
		"air-datepicker": "^3.1.1",
		"inputmask": "^5.0.7",
		"jsdom": "^19.0.0"
	}
}

[GeminiX]

RESURT, npm run surge что-то делает, видимо деплой.

[RESURT]

Александр, попробовал

[GeminiX]

что в gulpfile?

[RESURT]

Александр,

// Названия файлов:
// 1. project_folder = Конечная папка
// 2. source_folder = Начальная папка

let project_folder = 'dist';
let source_folder = '#src';

// Пути до файлов:
// build: пути до конечных файлов
// src: пути до исходных файлов
// watch: пути до файлов под наблюдением
// clean: путь до конечного файла (Что-бы создать папку заново)

//? ** - все под папки
//? *. - все файлы с определеным расширением 
//? {} - перечень файлов

let path = {
	build: {
		html: project_folder + '/',
		css: project_folder + '/assets/css/',
		scripts: project_folder + '/assets/scripts/',
		img: project_folder + '/assets/img/',
		fonts: project_folder + '/assets/fonts/',
	},
	src: {
		html: [source_folder + '/pages/*.{html,pug}', '!' + source_folder + '/pages/_*.{html,pug}'],
		css: source_folder + '/sass/*.{scss,sass}',
		js: source_folder + '/js/*.js',
		ts: source_folder + '/ts/*.ts',
		img: source_folder + '/img/**/*.{jpeg,jpg,png,svg,gif,ico}',
		fonts: source_folder + '/fonts/*.{eot,ttf,woff,woff2}',
	},
	watch: {
		html: source_folder + '/**/*.{html,pug}',
		css: source_folder + '/**/*.{scss,sass}',
		js: source_folder + '/js/*.js',
		ts: source_folder + '/ts/*.ts',
		img: source_folder + '/img/*.{jpeg,jpg,png,svg,gif,ico}',
		// components_css: source_folder + '/components/**/*.{sass,scss}',
		// components_html: source_folder + '/components/**/*.{pug,html}'
	},
	clean: "./" + project_folder + "/",
}

import gulp from "gulp";
import browsersync from "browser-sync";
import fileinclude from "gulp-file-include";
import del from "del";
import gulpSass from "gulp-sass";
import simpleSass from "sass";
import autoprefixer from "gulp-autoprefixer";
import group_media from "gulp-group-css-media-queries";
import cleanCSS from "gulp-clean-css";
import cleanJs from "gulp-uglify-es";
import rename from "gulp-rename";
import imagemin from "gulp-imagemin";
import mozjpeg from "imagemin-mozjpeg";
import optipng from "imagemin-optipng";
import svgo from "imagemin-svgo";
import pug from 'gulp-pug';
import pugbem from 'gulp-pugbem';
import gulpts from "gulp-typescript";
import c from 'ansi-colors';

const sass = gulpSass(simpleSass)
// Запуск сервера
export const browserSync = () => {
	browsersync.init({
		server: {
			baseDir: "./" + project_folder + "/"
		},
		port: 3000,
		notify: false,
	})
}

// Сборка html
export const html = () => {
	return gulp.src(path.src.html)
		.pipe(
			pug({
				plugins: [pugbem],
				pretty: true
			})
		)
		.pipe(fileinclude())
		.pipe(imagemin([
			svgo()
		]))
		.pipe(gulp.dest(path.build.html))
		.pipe(browsersync.stream())
}

// Сборка images
export const images = () => {
	return gulp.src(path.src.img)
		.pipe(imagemin([
			mozjpeg({ quality: 75, progressive: true }),
			optipng({ optimizationLevel: 5 }),
		]))
		.pipe(gulp.dest(path.build.img))
		.pipe(browsersync.stream())
}

// Сборка js
export const js = () => {
	return gulp.src(path.src.js)
		.pipe(gulp.dest(path.build.scripts))
		.pipe(cleanJs.default())
		.pipe(rename({ extname: ".min.js" }))
		.pipe(gulp.dest(path.build.scripts))
		.pipe(browsersync.stream())
}

// // Сборка ts
// export const ts = () => {
// 	return gulp.src(path.src.ts)
// 		.pipe(gulpts())
// 		.pipe(fileinclude())
// 		.pipe(gulp.dest(path.build.scripts))
// 		.pipe(cleanJs.default())
// 		.pipe(rename({ extname: ".ts.min.js" }))
// 		.pipe(gulp.dest(path.build.scripts))
// 		.pipe(browsersync.stream())
// }

// Сборка css из sass
export const css = () => {
	return gulp.src(path.src.css)
		.pipe(sass({ outputStyle: 'expanded', }).on('error', sass.logError))
		.pipe(
			autoprefixer({
				overrideBrowserslist: ['last 5 version'],
				cascade: true
			})
		)
		.pipe(group_media())
		.pipe(gulp.dest(path.build.css))
		.pipe(cleanCSS({debug: true}, (details) => {
			console.log(c.cyan.bold(`INFO CSS MIN`));
			console.log(c.red.bold(`=========================================`));
      console.log(c.red.bold(`FROM ${details.name}: ${details.stats.originalSize}KB`));
      console.log(c.green.bold(`TO ${details.name}: ${details.stats.minifiedSize}KB`));
			console.log(c.green.bold(`=========================================`));
    }))
		.pipe(rename({ extname: ".min.css" }))
		.pipe(gulp.dest(path.build.css))
		.pipe(browsersync.stream())
}

// Fonts
export const fonts = () => {
	return gulp.src(path.src.fonts)
		.pipe(gulp.dest(path.build.fonts))
		.pipe(browsersync.stream())
}


// Моментальное обновление файлов
export const watchFiles = () => {
	gulp.watch([path.watch.js], js);
	// gulp.watch([path.watch.ts], ts);
	gulp.watch([path.watch.html], html);
	gulp.watch([path.watch.css], css);
	gulp.watch([path.watch.img], images);
	// gulp.watch([path.watch.components_css], css);
	// gulp.watch([path.watch.components_html], html);
}

// Создание папки заного
export const clean = () => {
	return del(path.clean)
}

export default gulp.series(
	clean,
	gulp.parallel(
		js,
		// ts,
		css,
		html,
		images,
		fonts,
	),
	gulp.parallel(
		js,
		// ts,
		css,
		html,
		images,
		fonts,
		watchFiles,
		browserSync)
);

[GeminiX]

RESURT, эти экспортируемые функции можно выполнить через команды gulp (надо поставить сам gulp) и имя функции,видимо gulp.series билдит и стартут

[Сергей delphinpro]

Александр, surge это деплой уже собранного проекта.

видимо gulp.series билдит и стартут

series и parallel просто выполняют задачи.
export default определяет задачу по-умолчанию, которая будет выполнятся при вызове команды gulp без аргуметов.

RESURT, просто выполните команду gulp в папке проекта.
Если будет ошибка "gulp не является командой", то сначала установите его глобально

npm i -g gulp

При этом в винде директория c:\Users\%USERNAME%\AppData\Roaming\npm\ должна присутствовать в системной переменной PATH.

Можно галп не ставить глобально и воспользоваться локальной установкой в проекте
Команда:
node_modules/.bin/gulp