Как в gulp выполнить таски по очередно?

251
29 июня 2017, 05:05

При первом запуске gulp, когда еще проект не собран, запускается browserSync, но все файлы еще не успели сгенерироваться.

'use strict'; 
 
var gulp = require('gulp'), 
		watch = require('gulp-watch'), 
		plumber = require('gulp-plumber'), 
		prefixer = require('gulp-autoprefixer'), 
		uglify = require('gulp-uglify'), 
		sass = require('gulp-sass'), 
		sourcemaps = require('gulp-sourcemaps'), 
		fileinclude = require('gulp-file-include'), 
		cssmin = require('gulp-minify-css'), 
		imagemin = require('gulp-imagemin'), 
		pngquant = require('imagemin-pngquant'), 
		rimraf = require('rimraf'), 
		browserSync = require("browser-sync"), 
		rename = require('gulp-rename'), 
		spritesmith  = require('gulp.spritesmith'), 
		reload = browserSync.stream; 
 
var path = { 
	dist: { 
		html: 'dist/', 
		js: 'dist/js/', 
		css: 'dist/css/', 
		img: 'dist/img/', 
		fonts: 'dist/fonts/' 
	}, 
	app: { 
		html: 'app/*.html', 
		js: 'app/js/main.js', 
		style: 'app/scss/main.scss', 
		sprite: 'app/img/sprite/*.*', 
		img: 'app/img/**/*.*', 
		fonts: 'app/fonts/**/*.*', 
	}, 
	watch: { 
		html: 'app/**/*.html', 
		js: 'app/js/**/*.js', 
		style: 'app/scss/**/*.scss', 
		img: 'app/img/**/*.*', 
		sprite: 'app/img/sprite/*.*', 
		fonts: 'app/fonts/**/*.*' 
	}, 
	ignoreFile: { 
		img: '!app/img/sprite/**' 
	}, 
	export: { 
		img: 'app/img/', 
		style: 'app/scss/imports/' 
	}, 
	spriteTemplate: 'sass.template.mustache', 
	clean: './dist' 
}; 
 
var config = { 
	server: { 
		baseDir: "./dist" 
	}, 
	// tunnel: true, 
	host: "178.150.110.97", 
	notify: false, 
	logPrefix: "Frontend_Devil" 
}; 
 
gulp.task('webserver', function () { 
	browserSync(config); 
}); 
 
gulp.task('clean', function (cb) { 
	rimraf(path.clean, cb); 
}); 
 
gulp.task('html:dist', function () { 
	gulp.src(path.app.html) 
	.pipe(plumber()) 
	.pipe(fileinclude({ 
		prefix: '@@', 
		basepath: '@file' 
	})) 
	.pipe(gulp.dest(path.dist.html)) 
	.pipe(reload()); 
}); 
 
gulp.task('js:dist', function () { 
	gulp.src(path.app.js) 
	.pipe(plumber()) 
	.pipe(fileinclude({ 
		prefix: '@@', 
		basepath: '@file' 
	})) 
	.pipe(sourcemaps.init()) 
	.pipe(sourcemaps.write()) 
	.pipe(gulp.dest(path.dist.js)) 
	.pipe(uglify()) 
	.pipe(sourcemaps.write()) 
	.pipe(rename({suffix: '.min', prefix : ''})) 
	.pipe(gulp.dest(path.dist.js)) 
	.pipe(reload()); 
}); 
 
gulp.task('style:dist', function () { 
	gulp.src(path.app.style)  
	.pipe(plumber()) 
	.pipe(sourcemaps.init()) 
	.pipe(sass({ 
		sourceMap: true, 
		errLogToConsole: true 
	})) 
	.pipe(prefixer()) 
	.pipe(sourcemaps.write()) 
	.pipe(gulp.dest(path.dist.css)) 
	.pipe(cssmin()) 
	.pipe(sourcemaps.write()) 
	.pipe(rename({suffix: '.min', prefix : ''})) 
	.pipe(gulp.dest(path.dist.css)) 
	.pipe(reload()); 
}); 
 
gulp.task('image:dist', function () { 
	gulp.src([path.ignoreFile.img, path.app.img]) 
	.pipe(plumber()) 
	.pipe(imagemin({ 
		progressive: true, 
		svgoPlugins: [{removeViewBox: false}], 
		use: [pngquant()], 
		interlaced: true 
	})) 
	.pipe(gulp.dest(path.dist.img)) 
	.pipe(reload()); 
}); 
 
gulp.task('sprite:dist', function () { 
	var spriteData = 
		gulp.src(path.app.sprite) 
		.pipe(spritesmith({ 
			imgName: 'sprite.png', 
			cssName: '_sprite.scss', 
			cssFormat: 'scss', 
			algorithm: 'binary-tree', 
			cssTemplate: path.spriteTemplate, 
			cssVarMap: function(sprite) { 
				sprite.name = 's-' + sprite.name 
			} 
		})); 
		spriteData.img.pipe(gulp.dest(path.export.img)); 
		spriteData.css.pipe(gulp.dest(path.export.style)); 
}); 
 
gulp.task('fonts:dist', function() { 
	gulp.src(path.app.fonts) 
	.pipe(gulp.dest(path.dist.fonts)) 
}); 
 
gulp.task('dist', [ 
	'html:dist', 
	'js:dist', 
	'sprite:dist', 
	'style:dist', 
	'fonts:dist', 
	'image:dist' 
	]); 
 
gulp.task('watch', function(){ 
	watch(path.watch.html, function(event, cb) { 
		gulp.start('html:dist'); 
	}); 
	watch(path.watch.style, function(event, cb) { 
		gulp.start('style:dist'); 
	}); 
	watch(path.watch.js, function(event, cb) { 
		gulp.start('js:dist'); 
	}); 
	watch([path.ignoreFile.img, path.watch.img], function(event, cb) { 
		gulp.start('image:dist'); 
	}); 
	watch(path.watch.sprite, function(event, cb) { 
		gulp.start('sprite:dist'); 
	}); 
	watch(path.watch.fonts, function(event, cb) { 
		gulp.start('fonts:dist'); 
	}); 
}); 
 
gulp.task('default', ['dist', 'webserver', 'watch']);

Answer 1

Привет. Я делал так с использованием gulpsync.sync:

gulp.task('watch', gulpsync.sync(['css:build', 'ionic_scss:build', 'dev_html:build']), function () {
    watch([path.watch.mustache], function (event, cb) {
        gulp.start('dev_html:build');
    });
    watch([path.watch.ionic, path.watch.ionic_theme], function (event, cb) {
        gulp.start('ionic_scss:build');
    });
    watch([path.watch.style], function (event, cb) {
        gulp.start('css:build');
    });
});
READ ALSO
Сохранение данных из формы в таблице Excel

Сохранение данных из формы в таблице Excel

В общем, необходимо вносить данные, введенные в форме, в документ Excel, при этом каждый раз в новую строку средствами js

248
snapsvg (Cannot read property 'attr' of null)

snapsvg (Cannot read property 'attr' of null)

Подскажите пожалуйста, в чем может быть косяк? Картинка в блок грузится, но атрибут отказывается работать

209
Получить данные из базы данных (Javascript)

Получить данные из базы данных (Javascript)

Добрый деньДано задание: есть html-страничка, на которой выведены поля для задания критерия поиска

427
Вывод сообщений онлайн чатом на экран

Вывод сообщений онлайн чатом на экран

Есть страница chathtml на которой есть поле ввода сообщения, кнопка отправки и поле вывода(таблица)

326