Question

我有以下任务来构建我的应用程序。它对网络有点删节。输出表示所有任务都已完成。对于Libs任务，省略通知消息所有输出完成EXCEPT。如果我单独运行，所有这些都有效。

我已经摆弄了代码，似乎有效，但我显然错过了一个关键事实。请帮忙。

下面的Gulp文件和输出：

//Gulp File

var gulp = require('gulp'),
    //..
    sass = require('gulp-sass');

gulp.task('default', ['clean'], function (cb) {
    gulp.start('libs', 'app', 'styles');
    cb();
});

gulp.task("app", function (cb) {
    gulp.src(['./app/main/app.js', './app/**/*.js'])
        .pipe(changed('public/js'))
        .pipe(concat('app.js'))
        .pipe(gulp.dest('public/js'))
    cb();
});

gulp.task("styles", function (cb) {
    gulp.src('./resources/sass/app.scss')
        .pipe(changed('public/css'))
        .pipe(sass({...}))
        .pipe(autoprefixer(...))
        .pipe(gulp.dest("./resources/build/"))
        .pipe(rename({suffix: '.min'}))
        .pipe(gulp.dest('public/css'))
    cb();
});


gulp.task('publish', function (cb) {
    gulp.src([
        'bower_components/jquery/dist/jquery.js',
        'bower_components/angular/angular.js',
       //..
        'bower_components/angular-aria/angular-aria.min.js'
    ])
        .pipe(gulp.dest('./resources/build/js/'));

    cb();
});


gulp.task('libs', ['publish'], function (cb) {
    gulp.src([
        'resources/build/js/angular.js',
        'resources/build/js/**/*.js'
    ])
        .pipe(concat('libraries.js'))
        .pipe(rename({suffix: '.min'}))
        .pipe(gulp.dest('public/js'))
    cb();
});

gulp.task('clean', function (cb) {
    del(['resources/build', 'public/js/', 'public/css/'], cb)
});

/ **问题 LIBRARIES.JS没有出现，gulp notify for libs不起作用

//Output of Gulp (default)
[01:14:05] Using gulpfile ~/dev/ttd/client/gulpfile.js
[01:14:05] Starting 'clean'...
[01:14:05] Finished 'clean' after 5.78 ms
[01:14:05] Starting 'default'...
[01:14:05] Starting 'publish'...
[01:14:05] Finished 'publish' after 11 ms
[01:14:05] Starting 'libs'...
[01:14:05] Finished 'libs' after 2.81 ms
[01:14:05] Starting 'app'...
[01:14:05] Finished 'app' after 3.39 ms
[01:14:05] Starting 'styles'...
[01:14:05] Finished 'styles' after 3.85 ms
[01:14:05] Finished 'default' after 22 ms
[01:14:05] gulp-notify: [Gulp notification] App Compiled
[01:14:06] gulp-notify: [Gulp notification] Styles Compiled

//Output of Gulp libs
[07:26:16] Using gulpfile ~/dev/ttd/client/gulpfile.js
[07:26:16] Starting 'publish'...
[07:26:16] Finished 'publish' after 7.4 ms
[07:26:16] Starting 'libs'...
[07:26:16] Finished 'libs' after 2.71 ms
[07:26:16] gulp-notify: [Gulp notification] Libs Compiled

感谢您的帮助。

Answer 1

请记住，gulp.src以异步方式完成工作。您需要返回流而不是立即调用cb：

//Gulp File

var gulp = require('gulp'),
    //..
    sass = require('gulp-sass');

gulp.task('default', ['clean', 'libs', 'app', 'styles']);

gulp.task("app", ['clean'], function () {
    return gulp.src(['./app/main/app.js', './app/**/*.js'])
        .pipe(changed('public/js'))
        .pipe(concat('app.js'))
        .pipe(gulp.dest('public/js'));
});

gulp.task("styles", ['clean'], function () {
    return gulp.src('./resources/sass/app.scss')
        .pipe(changed('public/css'))
        .pipe(sass({...}))
        .pipe(autoprefixer(...))
        .pipe(gulp.dest("./resources/build/"))
        .pipe(rename({suffix: '.min'}))
        .pipe(gulp.dest('public/css'));
});


gulp.task('publish', ['clean'], function () {
    return gulp.src([
        'bower_components/jquery/dist/jquery.js',
        'bower_components/angular/angular.js',
       //..
        'bower_components/angular-aria/angular-aria.min.js'
    ])
      .pipe(gulp.dest('./resources/build/js/'));
});


gulp.task('libs', ['clean', 'publish'], function () {
    return gulp.src([
        'resources/build/js/angular.js',
        'resources/build/js/**/*.js'
    ])
      .pipe(concat('libraries.js'))
      .pipe(rename({suffix: '.min'}))
      .pipe(gulp.dest('public/js'));
});

gulp.task('clean', function (cb) {
    del(['resources/build', 'public/js/', 'public/css/'], cb)
});

Answer 2

由于我现在忽略的原因gulp通常无法理解当前目录中的路径启动（例如，我不必在Laravel 5.4中为我的项目应用此解决方案......）。

在我的情况下，我在我的css / js路由文件之前错过了一个尾随.，导致正常运行gulp而没有任何输出结果（没有创建文件）。

所以我不得不离开这个：

var gulp = require('gulp');
var concat = require('gulp-concat');
var js = require('gulp-uglify');
var css = require('gulp-uglifycss');

var stylesheets = [
    '/css/fabric.css'
];

var scripts = [
    '/js/fabric.js'
];

gulp.task('css', function() {
    return gulp.src( stylesheets )
        .pipe( concat('fabric.min.css') )
        .pipe( css() )
        .pipe( gulp.dest('/dist/css/') );
});

对此：

var gulp = require('gulp');
var concat = require('gulp-concat');
var js = require('gulp-uglify');
var css = require('gulp-uglifycss');

var stylesheets = [
    './css/fabric.css'
];

var scripts = [
    './js/fabric.js'
];

gulp.task('css', function() {
    return gulp.src( stylesheets )
        .pipe( concat('fabric.min.css') )
        .pipe( css() )
        .pipe( gulp.dest('./dist/css/') );
});

希望它有助于节省宝贵的时间并防止头痛！

Gulp任务说完整，但不会产生结果

2 个答案: