Gulp doesn't combine or uglify

Question

I seem to have configured Gulp to run in Netbeans. My goal is to have gulp simply combine all Javascript files from one directory into one file, and then "uglify" the that resulting file.

When I save one of my Javascript file, a new Javascript file is created, but, it is not combined with any other files, nor is it uglified. I don't get any error messages, but I don't get any desired results either. Where am I going wrong?

Here is my gulpfile.js:

var gulp = require('gulp'),
    gp_concat = require('gulp-concat'),
    gp_rename = require('gulp-rename'),
    gp_uglify = require('gulp-uglify');

gulp.task('combine', function(){
    return gulp.src(['*.js'])
        .pipe(gp_concat('concat.js'))
        .pipe(gulp.dest('dist'))
        .pipe(gp_rename('uglify.js'))
        .pipe(gp_uglify())
        .pipe(gulp.dest('dist'));
});

gulp.task('default', ['combine'], function(){});

And here is my package.json:

{
    "name": "xxxxxxxxxxxxxxxxxx",
    "version": "1.0.0",
    "keywords": ["util", "functional", "server", "client", "browser"],
    "author": "xxxxxxxxxxxxxxxxxx",
    "contributors": [],
    "dependencies": {},
    "scripts" :
    {
        "watch" : "watchify ../../html/xxxxxxxxxxxxxxxxxx/js/*.js -o ../../html/xxxxxxxxxxxxxxxxxx/bundle.js -v"
    }
}

Note that these are files I copied from examples here on Stack Overflow and elsewhere in the web, so I'm sure I'm missing something.

Latest Update:

I am now using this revised Gulp file, with directory paths corrected:

var gulp = require('gulp'),
    expect = require('gulp-expect-file'),
    concat = require('gulp-concat'),
    minify = require('gulp-minify'),
    gutil = require('gulp-util'),
    babel = require('gulp-babel'),
    jsFiles = '../../html/public_html/js/*.js',
    jsDest = '../../public_html/dist';

gulp.task('combine', function ()
{
    return gulp.src(jsFiles)
        .pipe(expect(jsFiles))
        .pipe(babel({presets: ['babili']}))
        .pipe(concat('concat.js'))
        .pipe(minify().on('error', gutil.log))
        .pipe(gulp.dest(jsDest));
});

When I run it, I still don't get any resulting combined file in my dist/folder.

I now get this error output:

[11:53:13] Using gulpfile ~\Documents\NetBeansProjects\Project_Name\gulpfile.js
[11:53:13] Starting 'combine'...
[11:53:13] Tested 5 tests, 5 passes, 0 failures: PASS
Done.

events.js:160
      throw er; // Unhandled 'error' event
      ^
SyntaxError: ..\..\html\html\public_html\js\*.js
Unexpected token: operator (>) (line: 30, col: 34, pos: 95518
    at JS_Parse_Error.get (eval at <anonymous> (C:\Users\Project Username\Documents\NetBeansProjects\Project_Name\node_modules\uglify-js\tools\node.js:27:1), <anonymous>:86:23)
    at PluginError.<anonymous> (C:\Users\Project Username\Documents\NetBeansProjects\Project_Name\node_modules\gulp-util\lib\PluginError.js:37:60)
    at Array.forEach (native)
    at new PluginError (C:\Users\Project Username\Documents\NetBeansProjects\Project_Name\node_modules\gulp-util\lib\PluginError.js:36:16)
    at Transform.minify [as _transform] (C:\Users\Project Username\Documents\NetBeansProjects\Project_Name\node_modules\gulp-minify\index.js:117:23)
    at Transform._read (C:\Users\Project Username\Documents\NetBeansProjects\Project_Name\node_modules\through2\node_modules\readable-stream\lib\_stream_transform.js:184:10)
    at Transform._write (C:\Users\Project Username\Documents\NetBeansProjects\Project_Name\node_modules\through2\node_modules\readable-stream\lib\_stream_transform.js:172:12)
    at doWrite (C:\Users\Project Username\Documents\NetBeansProjects\Project_Name\node_modules\through2\node_modules\readable-stream\lib\_stream_writable.js:237:10)
    at writeOrBuffer (C:\Users\Project Username\Documents\NetBeansProjects\Project_Name\node_modules\through2\node_modules\readable-stream\lib\_stream_writable.js:227:5)
    at Transform.Writable.write (C:\Users\Project Username\Documents\NetBeansProjects\Project_Name\node_modules\through2\node_modules\readable-stream\lib\_stream_writable.js:194:11)

Can you just try this one `gulp.src('./js/*.js').pipe(concat('concat.js'))...` rest as your code already is. and also gulp task should have return, i.e. add `return` just before `gulp src(...)...` — Rajesh Dan, Aug 10 '17 at 06:38
@RajeshDan, thank you for your suggestion. I modified the code as you suggested, but unfortunately, I still did not get any combined file. — Questioner, Aug 10 '17 at 07:07
Then please make sure that the paths (source and destination) are correct and there's no permission issue! as it may happen sometime. — Rajesh Dan, Aug 10 '17 at 07:10
And also can you share the directory structure? That may help us to help you! — Rajesh Dan, Aug 10 '17 at 07:12
@RajeshDan, I will include the directory structure in my answer, please give me a few minutes to put it together. However, if the files were not found, would it not give me any kind of error saying so? Can I turn on verbose error reporting to see if that is the issue? — Questioner, Aug 10 '17 at 07:15
@RajeshDan, the directory structure is now added to the question. — Questioner, Aug 10 '17 at 07:33
Well it seems that you need to add `public_html/` in both of your source and destination path. Please make sure that the paths are correct, start from the directory where the gulp file is. Gulp will not throw any error if files are not found! — Rajesh Dan, Aug 10 '17 at 07:37
may be something like that `gulp.src('public_html/js/*.js').......pipe(gulp.dest('public_html/dist/'))` — Rajesh Dan, Aug 10 '17 at 07:39
@RajeshDan, thanks for following up. I've tried `public_html/js/*.js` as well as `./public_html/js/*.js`, but neither have worked. I just can't seem to get Gulp to find the files! — Questioner, Aug 10 '17 at 07:49
@Questioner By default Gulp does not generate an error if no source file is found. You can use `gulp-expect-file` to get notification. See my updated answer — Alexander Elgin, Aug 10 '17 at 07:51
@AlexanderElgin, thanks for suggesting the new code. I added it to my project, and it now at least gives me some error output, which I've added to my question. Note that I specified a single file instead of using a wildcard, just to be extra clear. It seems I am still not locating directories correctly, even though I've tried multiple approaches. I'm at a loss for how the file is now being found. — Questioner, Aug 10 '17 at 08:35
@Questioner Where do you run the gulp script? Where is your gulp file located? Is it `html` directory? — Alexander Elgin, Aug 10 '17 at 09:11
@AlexanderElgin, the gulp file is in "Directory X" as shown in the image. I run it by right clicking on it in Netbeans and selecting it from "Gulp Tasks". — Questioner, Aug 10 '17 at 09:18
@Questioner That's the issue. The src and dst paths should be relative to the directory where you run the gulp. I think they should be '../../html/public_html/js/*.js' and '../../public_html/dist' — Alexander Elgin, Aug 10 '17 at 09:28
@AlexanderElgin, you were right... I was missing the `/html/` part of my directory path, a simple oversight on my part. Thank you for pointing it out. Now the files are being found, so that's progress. Unfortunately, though, I now seem to be getting some kind of broader error. I've added the new error output to my question. — Questioner, Aug 14 '17 at 02:57
@AlexanderElgin, thanks for following up. To be honest, I'm not sure. I built my files out of what I thought was standard Javascript, picking up some ideas from the web as I went. I didn't intentionally include or avoid any ES6 syntax, and I wouldn't know for sure how to identify it. — Questioner, Aug 14 '17 at 06:26
@Questioner Try t use `gulp-babel` as it is suggested here: https://stackoverflow.com/questions/34103905/minify-not-transpile-es2015-code-with-gulp. — Alexander Elgin, Aug 14 '17 at 06:59
@AlexanderElgin, thanks for the new suggestion. I added gulp-babel as you suggest, and updated my question, but it has not changed the error output. — Questioner, Aug 14 '17 at 07:07
@Questioner Had you installed `babili`? If you had most probably there is a syntax error in one of your JS files. You can try to apply the gulp command to two JS files (instead of `*.js` pattern). if the error goes away there is definitely a syntax error. — Alexander Elgin, Aug 14 '17 at 07:15
@AlexanderElgin, I installed `babili` with `npm install babili --save-dev`. If I try to specify two JS files, the error changes to `SyntaxError: ..\..\html\blockchain_explorer\js\concat.js`. It's as if it is finding problems with a file called `concat.js`, but that file doesn't exist. I only have it in the `.pipe(concat('concat.js'))` because I thought that was a parameter necessary for `concat` to run. — Questioner, Aug 14 '17 at 07:19
@AlexanderElgin, success! After some testing, I found that a function used a command called `Promise`, and when I removed it, the Gulp compiler worked! — Questioner, Aug 14 '17 at 07:36

Alexander Elgin · Answer 1 · 2017-08-10T07:49:15.817

1

Try this

var gulp = require('gulp'),
    expect = require('gulp-expect-file'),
    concat = require('gulp-concat'),
    minify = require('gulp-minify');

gulp.task('combine', function() {
    var files = ['*.js'];
    gulp.src(files)
        .pipe(expect(files))
        .pipe(concat('concat.js'))
        .pipe(minify())
        .pipe(gulp.dest('dist/'));
});

```

You should also add the following lines "gulp-minify": "0.0.14" and "gulp-expect-file": "0.0.7" to the devDependencies of your package.json

I am not sure but it seems that the pattern ** (any folder) does not work in gulp. Hence your pattern *.js will search files with js extension in the root folder only.

edited Aug 10 '17 at 07:49

answered Aug 10 '17 at 05:21

Alexander Elgin

6,796
4
40
50

Thank you so much for responding. I am using your code, and when I run the `combine` function, I get no errors. However, no combined file appears in the `dist/` directory. I've updated my question with your code and the resulting output. – Questioner Aug 10 '17 at 06:15
@Questioner Most probably your pattern `*.js` does not match any file. In that case no file will be generated in the destination. – Alexander Elgin Aug 10 '17 at 07:14
Thanks for following up. When you say `*.js` does not match any file, do you mean in the sense that it is not valid in Gulp to use wildcards? Or do you mean in the sense that the directory is likely not being found? If it's the latter, should I not get some kind of error message? – Questioner Aug 10 '17 at 07:17
@Questioner Gulp supports wildcards. But I think that the pattern you use does not match any file in your project – Alexander Elgin Aug 10 '17 at 07:32

Gulp doesn't combine or uglify

1 Answers1