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.
Related
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.
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.
This is still an unsolvable issue for me using WebStorm 11 and the latest version of JSHint 2.9.3
The problem is this:
If I specify only "esversion": 6, in my .jshintrc I get perfect JSHINT output. The problem is that the WebStorm editor is erroring out basic ES6 keywords like 'import'. It states I should use 'esnext: true' See image.
If I add 'esnext: true' in .jshintrc too then JSHint is complaining that "Incompatible values for the 'esversion' and 'esnext 0% scanned". So I can't use them combined.
If I only use esnext: true then I get the the same error 0% scanned. So whatever I do. I can't get it fixed.
I am not sure what exactly generates the warning and how to get rid of it using only esversion: 6 and not the deprecated esnext.
Is it something in WebStorm? What JsHint is WebStorm using? Is it the one installed in my node_modules? Does it use a JShint built-in WebStorm or a plugin? How does this work?
I fixed this checking other issues posted and links in it.
Like this one
https://www.jetbrains.com/help/webstorm/2016.2/jshint.html
In the settings of Webstorm I updated my version to 2.9.3 in the Version dropdown. See the picture.
Maybe I'm an idiot, but I cannot get the combination of gulp-watch and gulp-ruby-sass to work. Any suggestions are hugely welcome. For all the following, the require() calls in my gulpfile.js look like this:
var gulp = require('gulp');
var watch = require('gulp-watch');
var plumber = require('gulp-plumber');
var sass = require('gulp-ruby-sass');
The next bit is what I can't get working. When I change a file I see the output from gulp-watch stating the file was changed, but no output from gulp-ruby-sass and the file isn't written to the dist/ directory.
gulp.task('test-watch', function() {
return watch('./**/*.scss')
.pipe(plumber())
.pipe(sass())
.pipe(gulp.dest('dist/'));
});
Yet I know both gulp-watch and gulp-ruby-sass are setup correctly individually because they work fine on their own:
// writes updated files to dist/ successfully
gulp.task('test-watch', function() {
return watch('./**/*.scss')
.pipe(plumber())
.pipe(gulp.dest('dist/'));
});
// compiles into css and writes to dist/ directory successfully
gulp.src('./**/*.scss')
.pipe(sass())
.pipe(gulp.dest('dist/'));
So what's my problem? Even more vexing, the example above that does not work actually comes from the gulp-watch readme, so should be something that's supported. Any advice is very welcome!
It seems the "solution" is to use gulp-sass for this instead of gulp-ruby-sass.
I still do not know why gulp-ruby-sass doesn't support this since piping the results of gulp.src() into and out of gulp-ruby-sass works like a champ, but it doesn't. I wonder if gulp-watch returns a different file format than gulp.src that gulp-ruby-sass can't handle but gulp-sass can.
If anyone knows how to make this work for gulp-ruby-sass since that's supposedly more fully-featured, please do share.
I was wondering if there is anyway to compile a scss file to css and inside the css file are comments that tell you what changed in the scss.
It might look something like this:
/* line 9, ../sass/foundation/components/_global.scss */
html,{}
I just recently started working with sass and the person previously who did the sass compiling used compass. I read somewhere that it involves the config.rb but I can't find this file. Can anyone help?
According to the Sass Reference, the correct option is :line_numbers – you want to set that to true. That will generate comments with the format in your question.
How to set that option that depends on how you are compiling your Sass. Installing Compass would set up a configuration file config.rb in which you could write line_numbers = true. If you're just using the sass command-line tool, there is a command-line switch to enable the option, according to sass --help. You can use the command sass --line-numbers to compile with that option enabled.