I'm using the ESLint extension for VSCode. I'm also using Gulp Include to concatenate my JS files. ESLint doesn't seem to understand Gulp Include's way of pulling files in, such as:
//=require third-party/jquery.min.js
As a result, it gives a whole tonne of no-undef errors for things that are defined in my included JS files.
I can tell ESLint top ignore no-undef errors, but that's not ideal. Has anyone got it to work with Gulp Include? Maybe it'd be easier if I was using Gulp ESLint, but I love how it works in VSCode. This seems like it should be quite a common problem but I can't find anything about it!
Thanks loads for any help.
Related
Desperate mode: Tried many different configs and all failed. I have a browserified + babelified bundle called videomail-client.js here:
https://github.com/binarykitchen/videomail-client/tree/develop/dist
The package.json's main entry of that package is pointing to this file.
Now, when I require() that package from another project within and browserify it, then I see this error from the gulp task using browserify:
[16:26:32] Error: Cannot find module './keys' from '/home/michael-heuberger/code/videomail.io/node_modules/videomail-client/dist'
at /home/michael-heuberger/code/videomail.io/node_modules/browser-resolve/node_modules/resolve/lib/async.js:55:21
at load (/home/michael-heuberger/code/videomail.io/node_modules/browser-resolve/node_modules/resolve/lib/async.js:69:43)
at onex (/home/michael-heuberger/code/videomail.io/node_modules/browser-resolve/node_modules/resolve/lib/async.js:92:31)
at /home/michael-heuberger/code/videomail.io/node_modules/browser-resolve/node_modules/resolve/lib/async.js:22:47
at FSReqWrap.oncomplete (fs.js:152:21)
Hmnmm, sounds complicated? Let me rephrase. Package videomail-client is browserified. Another project, videomail.io, is requiring it and browserifying all together over again with other packages. That's there it fails.
On a side note, when I run standalone examples using videomail-client.js, it works fine.
I think the problem is that browserify can't resolve the ./keys file. But it should be included in the browserified videomail-client.js package and resolved from there. How can I tell browserify to resolve it the correct way?
Suggestions welcome how I can investigate and fix this best. Thanks!!
The solution has two steps: use browserify's standalone option and the gulp-derequire package. It works now.
This sounds a lot like a problem I ran into a few years ago (and yes, it is tough to describe :) )
I never got an answer but maybe you'll have better luck. The solution I eventually went with was to not attempt to re-browserify already-browserified libraries; I ended up just concatenating it in and minifying the whole bundle afterwards.
I am new to gulp and i am getting object expected gulp error, but found solutions as rename file to gulfile.js
1) Need to understand every project has only one gulp file thats gulpfile.js? If i need to define more than one then how to and what will be the file name.
2)My requirement is to concatenate more than one less(convert to css) & js file into one and then apply it to index.html
3) I am using express to create gulp project structure. is this standard way? if no then how do i?
4) everytime i create gulp skeleton, do i need to install all packages again for every project?
Any references from where can learn gulp from basic.
I think one of the reasons you're getting downvoted is that on SO each question should be one question. This should really be four separate questions. Another reason is you haven't provided any of your code - add code (the { } icon) and include your gulpfile.js and your package.json.
1a) Yes, it has to be called gulpfile.js
1b) If you search SO and google for "multiple gulpfiles" you'll get a lot of solutions. If none of them work for you, let us know what you tried and what went wrong. But just so you know, it's better to start with just one gulpfile - it can be hard to get multiple gulpfiles working correctly, and using just one will help you learn gulp.
2) you'll need to use gulp-less and gulp-concat to turn multiple LESS files into one CSS file, and gulp-concat again to turn multiple js files into one.
3) You can use express, but you don't have to do. It depends what you're doing, and we have no idea what you're doing.
4) Not sure what you mean by "gulp skeleton". If you mean "Do I need to run npm install for every new project, yes you do.
5) Google "learn gulp"
6) If an image could just be text, it's better to just include the text.
If you need to, open new specific questions. For more on writing a great SO question, see https://stackoverflow.com/help/how-to-ask
I'm using this yeoman generator (https://github.com/Swiip/generator-gulp-angular) for my project. And have added a couple of bower libraries, namely, videojs, ngDialog.
The problem I'm experiencing is that the css files included in these libraries aren't being packaged up into the vendor.css file like the rest of the packages are. I know that that the generator uses wiredep, but I'm afraid I don't know enough about it to find out what went wrong.
Basically, when I go to view source, I see that there are style includes underneath the vendor.css style include, eg.
<link rel="stylesheet" href="../bower_components/ngDialog/css/ngDialog.css">
Also notice how it is included using "../". This would break if I'm in an HTML file that is in a directory other than the root.
Any pointers?
Thanks.
John.
Basically you don't have to worry about the building process, the gulpfile provided by gulp-angular is well configured for you future including bower components.
Once you run bower install your_component, be sure to run gulp build again in command line, it will then include the needed styles to your index.html.
If you would like to know more about the underlying process with that, you may check yourapp/src/index.html from line 12 to line 20 to get a sense of it. For how wiredep works for your bower components, the official document should suffice.
I am using gulp-jshint with browserify. browserify will generate a lot of code that fails jshint. I have read in this answer that there is an option to set "browserify": true since JSHint 2.5.3. However, this option will be ignored by gulp-jshint.
Does anyone know how to fix this? Can I use jshint and not gulp-jshint?
Ok, I screwed up. Of course I should lint my source files, not the file that browserify generated.
Is there a simple HTML preprocessor available to use for existing HTML code, that I won't need to modify my existing html to conform with preprocessors syntax?
I'm developing a mobile app with a few pages built with html, however i've started having the problem of having to update each page for when making changes to similiar content (header, footer etc) I don't want to duplicate content and have mismatches, rather i'd like to use a preprocessor that has an include method (something like how php does it), so that I can include these similiar contents.
I've looked at stuff like HAML & Jade, but it seems they have a strict syntax you need to follow with indents and the sort or editing html to include pipes on each line, else things wont compile.
Like I said I have existing html I would just like to cut & paste my HTML into different files, include them and stick with that workflow as I think it's the simplest.
But if anyone has any other ideas how I can tackle my situation that is welcomed too.
I guess since your requirement is to only include files that you don't need a full blown template system . You could take a look at gulp-include which is a gulp plugin to include files. Using gulp has the advantage that gulp comes with a watch feature to watch the file system for changes - whenever a change is detected a task can be triggered.
An example how your gulpfile.js could look like
var gulp = require('gulp');
var include = require('gulp-include');
gulp.task('template', function() {
return gulp
.src('*.html')
.pipe(include())
.pipe(gulp.dest('dist'))
});
gulp.task('dev', function() {
gulp.watch('*.html', ['template']);
});
gulp.task('default', ['template']);
This gulpfile registers a 'template' task that takes all html files and processes the file's contents with the gulp-include plugin. The template task is registed as default gulp task. So if you invoke gulp without any command line args then the template task is run. The gulp 'dev' task allows you to run gulp dev from the command line that watches all html files for changes and triggers the template task whenever a html file changes.
The gulp include plugin scans your html files for something like
= include relative/path/to/file.html
and includes 'file.html' contents.
The include syntax is quite well documented on the gulp-include web site.