0
Я пытаюсь схватить голову за глоток. Мне удалось написать gulpfile.js для моих основных страниц, но у меня проблемы с выполнением серверной задачи по порядку.Gulp не работает при запуске нескольких задач
Я пытаюсь создать файл css/main.css из scss-файлов, скопировать его в dist/css /, а затем вставить js и css-файлы в index.html (с помощью gulp-inject).
(function (r) {
var gulp = r('gulp');
var del = r('del');
var wiredep = r('wiredep');
var $ = r('gulp-load-plugins')();
// var runSequence = require('run-sequence');
var config = {
css_files: './css/*.css',
sass_files: './scss/*.scss',
main_sass: './scss/main.scss',
main_css: './css/main.css',
css_dir: './css/',
js_files: './js/*.js',
main_js: './js/main.js',
index: [
'./index.html',
'**/index.html',
'!node_modules/**/*.*',
'!bower_components/**/*.*',
],
dist: './dist/',
};
function clean(cb) {
del.sync([
config.css_files,
config.dist + config.css_files,
config.dist + config.js_files,
config.dist + config.index[0],
config.dist + config.index[1],
config.dist + '**/*.map',
]);
cb();
}
gulp.task('clean', function (cb) {
clean(cb);
});
gulp.task('scss', function (cb) {
gulp
.src(config.sass_files)
.pipe($.plumber())
.pipe($.sass())
.pipe(gulp.dest(config.css_dir));
cb();
});
gulp.task('js', function (cb) {
gulp
.src(config.js_files)
.pipe($.concat('main.js'))
.pipe($.sourcemaps.init())
.pipe($.uglify())
.pipe($.sourcemaps.write('./'))
.pipe(gulp.dest(config.dist + 'js/'));
cb();
});
gulp.task('css', ['scss'], function (cb) {
gulp
.src(config.css_files)
.pipe($.sourcemaps.init())
.pipe($.uglifycss())
.pipe($.sourcemaps.write('./'))
.pipe(gulp.dest(config.dist + 'css/'));
cb();
});
function wd(cb) {
wiredep({ ignorePath: '../..', src: config.main_sass, directory: './bower_components' });
wiredep({ ignorePath: '../..', src: config.index[0], directory: './bower_components' });
cb();
}
gulp.task('wd', function (cb) {
wd(cb);
});
gulp.task('inject-dev', ['wd'], function (cb) {
var src = ['!dist/**/*.*'].concat(config.index);
gulp
.src(src)
.pipe($.inject(gulp.src([config.css_files, config.js_files])))
.pipe(gulp.dest('./'));
cb();
});
gulp.task('inject-dist', ['copy-index'], function (cb) {
var src = gulp.src([config.dist + 'css/**/*.*', config.dist + 'js/**/*.*']);
var target = gulp.src(config.dist + '**/index.html');
target.pipe($.inject(src, { relative: true }))
.pipe(gulp.dest(config.dist));
cb();
});
gulp.task('watch', function (cb) {
gulp.watch(config.sass_files, ['scss']);
cb();
});
gulp.task('copy-index', function (cb) {
gulp
.src(config.index, { base: './' })
.pipe(gulp.dest(config.dist));
cb();
});
gulp.task('build-dist', ['clean', 'css', 'js', 'inject-dist']);
})(require);
ATM результат наращиванием дист генерируется файл JS/main.js, скопированный index.html и о/index.html, генерируется main.css в Dev директории, но не в дист. Файлы также не вводятся в dist/index.html.
λ szuja html-scaffold → λ git master* → tree -L 3 -I 'bower_components|node_modules'
.
├── about
│ └── index.html
├── bower.json
├── css
│ └── main.css
├── dist
│ ├── about
│ │ └── index.html
│ ├── index.html
│ └── js
│ ├── main.js
│ └── main.js.map
├── gulpfile.js
├── index.html
├── js
│ ├── main2.js
│ └── main.js
├── LICENSE
├── package.json
├── README.md
└── scss
└── main.scss
Edit: Похоже глоток не заботится об ожидании завершения задач игнорирования обратного вызова функции:
[16:15:47] Using gulpfile ~/workdir/html-scaffold/gulpfile.js
[16:15:47] Starting 'clean'...
[16:15:47] Finished 'clean' after 15 ms
[16:15:47] Starting 'scss'...
[16:15:47] Finished 'scss' after 75 ms
[16:15:47] Starting 'css'...
[16:15:47] Finished 'css' after 44 ms
[16:15:47] Starting 'js'...
[16:15:47] Finished 'js' after 74 ms
[16:15:47] Starting 'copy-index'...
[16:15:47] Finished 'copy-index' after 4.27 ms
[16:15:47] Starting 'inject-dist'...
[16:15:47] Finished 'inject-dist' after 13 ms
[16:15:47] Starting 'build-dist'...
[16:15:47] Finished 'build-dist' after 9.01 μs
[16:15:47] gulp-debug: 0 items
[16:15:47] gulp-debug: 0 items
[16:15:47] gulp-debug: scss/main.css
[16:15:47] gulp-debug: 1 item