How do I view linting errors when i run 'gulp'? - javascript

I'm trying to install the Airbnb JavaScript style guide into my environment. I'm using gulp to show linting errors as I save my .js files but it does not show it. If I do 'eslint main.js' it shows me the errors.
Is there any way I can show it through gulp when I execute 'gulp'?
Here are my config files:
var lint = require('gulp-eslint'); //Lint JS files, including JSX
var config = {
port: 9005,
devBaseUrl: 'http://localhost',
paths: {
html: './src/*.html',
js: './src/**/.js',
css: [
'node_modules/bootstrap/dist/css/bootstrap.min.css',
'node_modules/bootstrap/dist/css/bootstrap-theme.min.css'
],
dist: './dist',
mainJs: './src/main.js'
}
};
...
gulp.task('lint', function () {
return gulp.src(config.paths.js)
.pipe(lint())
.pipe(lint.format())
.pipe(lint.failAfterError());
});
gulp.task('watch', function () {
gulp.watch(config.paths.html, ['html']);
gulp.watch(config.paths.js, ['js', 'lint']);
gulp.watch(config.paths.css, ['css']);
});
gulp.task('default', ['html', 'js', 'css', 'lint', 'open', 'watch']);
my main.js file:
test = 1;
var App = console.log('Testing Browserify');
module.exports = App;
and here is what I see when I run 'gulp' and also when I run 'eslint main.js'. Errors should show on the terminal to the right, but it does not show any linting errors.

Have you tried setting your eslint configuration file on lint call?
gulp.task('lint', function () {
return gulp.src(config.paths.js)
.pipe(lint({
// Load a specific ESLint config
configFile: 'eslintConfig.json'
}
))
.pipe(lint.format())
.pipe(lint.failAfterError());
});
From: https://github.com/adametry/gulp-eslint/blob/master/example/config.js

Related

Local changes to file in node_modules (Angular 2)

I know that this can be a very stupid question, but I can't find matches with other posts on stackoverflow...
So: Can I modify a file of an external module , just save the file and do something that my app can listen?
At the moment, i'm trying ti change some scss style at the ng2-datepicker module (inside node_modules folder), but if I save and the launch ng serve, changes will not affect my project.
I know it's a simple problem, but i don't know the background architecture of an Angular2 project.
Thanks in advance.
(ps I've seen that i can fork the git and then do something like npm install.
Very interesting, but i also want to know how to have the same result in local)
If you are using gulp file you can tell the changed lib file path to copy to build folder check gulp.task('copy-libs') in code below git repo for angular2-tour-of-heroes using gulp
const gulp = require('gulp');
const del = require('del');
const typescript = require('gulp-typescript');
const tscConfig = require('./tsconfig.json');
const sourcemaps = require('gulp-sourcemaps');
const tslint = require('gulp-tslint');
const browserSync = require('browser-sync');
const reload = browserSync.reload;
const tsconfig = require('tsconfig-glob');
// clean the contents of the distribution directory
gulp.task('clean', function () {
return del('dist/**/*');
});
// copy static assets - i.e. non TypeScript compiled source
gulp.task('copy:assets', ['clean'], function() {
return gulp.src(['app/**/*', 'index.html', 'styles.css', '!app/**/*.ts'], { base : './' })
.pipe(gulp.dest('dist'))
});
// copy dependencies
gulp.task('copy:libs', ['clean'], function() {
return gulp.src([
'node_modules/angular2/bundles/angular2-polyfills.js',
'node_modules/systemjs/dist/system.src.js',
'node_modules/rxjs/bundles/Rx.js',
'node_modules/angular2/bundles/angular2.dev.js',
'node_modules/angular2/bundles/router.dev.js',
'node_modules/node-uuid/uuid.js',
'node_modules/immutable/dist/immutable.js'
'yourpath/changedFileName.js'
])
.pipe(gulp.dest('dist/lib'))
});
// linting
gulp.task('tslint', function() {
return gulp.src('app/**/*.ts')
.pipe(tslint())
.pipe(tslint.report('verbose'));
});
// TypeScript compile
gulp.task('compile', ['clean'], function () {
return gulp
.src(tscConfig.files)
.pipe(sourcemaps.init())
.pipe(typescript(tscConfig.compilerOptions))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('dist/app'));
});
// update the tsconfig files based on the glob pattern
gulp.task('tsconfig-glob', function () {
return tsconfig({
configPath: '.',
indent: 2
});
});
// Run browsersync for development
gulp.task('serve', ['build'], function() {
browserSync({
server: {
baseDir: 'dist'
}
});
gulp.watch(['app/**/*', 'index.html', 'styles.css'], ['buildAndReload']);
});
gulp.task('build', ['tslint', 'compile', 'copy:libs', 'copy:assets']);
gulp.task('buildAndReload', ['build'], reload);
gulp.task('default', ['build']);

Gulp-concat doesnt work. There's no output file

Can't figure out why gulp-concat doesn't work correctly. When i try to compile my javascript it doesn't give me the output file. All the paths are correct. I tried to remove .pipe(concat()) and the .js file appeared in the correct folder. But the same code with concat() doesn't work.
var gulp = require('gulp'),
sass = require('gulp-sass'),
jade = require('gulp-jade-php'),
concat = require('gulp-concat'),
notify = require('gulp-notify'),
cssmin = require('gulp-cssmin'),
rename = require('gulp-rename'),
uglify = require('gulp-uglify'),
autoprefixer = require('gulp-autoprefixer');
var path = {
src: {
styles: 'git/**/*.scss',
scripts: 'git/**/scripts/*.js',
jade: 'git/**/*.jade'
},
publicPath: "../",
npm: {
jquery: 'bower_components/jquery/dist/jquery.min.js',
bootstrap: 'bower_components/bootstrap-sass/assets/javascripts/bootstrap.js',
swiper: 'bower_components/swiper/dist/js/swiper.jquery.min.js'
},
watch: {
styles: 'git/**/*.scss',
scripts: 'git/**/*.js',
jade: 'git/**/*.jade'
}
};
var scriptPaths = [path.src.scripts, path.npm.jquery, path.npm.bootstrap, path.npm.swiper];
// Scripts //
gulp.task('scripts', function () {
return gulp.src(scriptPaths)
.pipe(concat('script.js'))
.pipe(notify({
message: 'Javascript Success'
}))
.pipe(gulp.dest(path.publicPath))
});
gulp.task('build:scripts', function () {
return gulp.src(scriptPaths)
.pipe(concat('script.js'))
.pipe(uglify())
.pipe(rename({
suffix: '.min'
}))
.pipe(notify({
message: 'Javascript Success'
}))
.pipe(gulp.dest(path.publicPath))
});
// Watch //
gulp.task('watch', function () {
gulp.watch(path.watch.styles, ['styles']);
gulp.watch(path.watch.scripts, ['scripts']);
gulp.watch(path.watch.jade, ['html']);
});
gulp.task('default', ['styles', 'scripts', 'html']);
gulp.task('build', ['build:styles', 'build:scripts', 'html']);
Do you have any ideas why it doesn't work. I tried to remove node_modules and installed it again, but it didn't help

How to fix, ENOENT error: no such file or directory when the "fonts" task mentioned below in the gulpfile.js starts

Following is the gulpfile.js which i have. Am getting ENOENT error: no such file or directory, when the "fonts" task starts, while running "gulp build-qa" command. Howeve, The build is successful every alternate time but not every time consistently. How to fix this issue ? I have made sure that every task has return, even though it is not working.
var gulp = require('gulp'),
del = require('del'),
pump = require('pump'),
flatten = require('gulp-flatten'),
usemin = require('gulp-usemin'),
htmlmin = require('gulp-htmlmin'),
cssmin = require('gulp-clean-css'),
uglifyjs = require('gulp-uglify'),
stripdebug = require('gulp-strip-debug'),
ngannotate = require('gulp-ng-annotate'),
rev = require('gulp-rev'),
concat = require('gulp-concat'),
sourcemaps = require('gulp-sourcemaps'),
connect = require('gulp-connect');
var ENV = process.env.NODE_ENV || 'dev',
APP_DIR = 'app',
BUILD_DIR = 'build',
SRC_DIR = 'source',
ZIP_DIR = 'packed';
gulp.task('clean', function () {
return del(
[BUILD_DIR + '/**', ZIP_DIR + '/**'],
{ dryRun: false })
.then(
// paths => { console.log('Files and folders that would be deleted:\n', paths.join('\n'));}
);
});
gulp.task('build-qa',['clean','fonts','images','partials','usemin-qa'], function(){});
/* Html processing, minifying and copying to build folder */
gulp.task('partials', function () {
return gulp.src(['**/*.html','!index.html'], {cwd: APP_DIR})
.pipe(htmlmin({ collapseWhitespace: true }))
.pipe(gulp.dest(BUILD_DIR));
});
/* Images copying to build folder */
gulp.task('images', function () {
return gulp.src('**/*.{jpg,png,gif,svg}')
.pipe(flatten())
.pipe(gulp.dest(BUILD_DIR+'/images'));
});
/* Find all font type files in 'fonts' folders and move to fonts build folder with flattened structure */
gulp.task('fonts', function () {
return gulp.src('**/fonts/*.{ttf,woff,eot,svg}')
.pipe(flatten())
.pipe(gulp.dest(BUILD_DIR+'/fonts'));
});
gulp.task('usemin-qa', function () {
return gulp.src('app/index.html')
.pipe(usemin({
// pipelines are named in the HTML, like js_lib and js_app below; html is the src file
html: [htmlmin({ collapseWhitespace: true, quotes: true, empty: true, spare: true, loose: true })],
css_lib: [
cssmin(),
'concat',
rev()
],
css: [
cssmin(),
'concat',
rev()
],
js_lib: [
ngannotate({remove: false, add: true}),
uglifyjs(),
rev()
],
js_app: [
sourcemaps.init(),
'concat',
ngannotate({remove: true, add: true}),
uglifyjs(),
rev()
]
}))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest(BUILD_DIR))
});
ENOENT errors in gulp are almost always caused by some kind of race condition.
The first problem is that all your tasks are sourcing files not just from your source folders. For example '**/fonts/*.{ttf,woff,eot,svg}' selects font files from anywhere in your project including your BUILD_DIR. You need to exclude BUILD_DIR in all your tasks:
gulp.task('fonts', function () {
return gulp.src(['**/fonts/*.{ttf,woff,eot,svg}',
'!'+BUILD_DIR+'/**'])
.pipe(flatten())
.pipe(gulp.dest(BUILD_DIR+'/fonts'));
});
The next problem is this line:
gulp.task('build-qa',['clean','fonts','images','partials','usemin-qa'], function(){});
This doesn't do what you think it does. All those tasks aren't executed in order, they're all executed at the same time. That means your clean task is deleting files in BUILD_DIR while your other tasks are busy copying files into that same directory.
You have two options:
(1) Place a dependency hint on all the other tasks. For example your fonts task would have to look like this:
gulp.task('fonts', ['clean'], function () {
return gulp.src(['**/fonts/*.{ttf,woff,eot,svg}',
'!' + BUILD_DIR + '/**'])
.pipe(flatten())
.pipe(gulp.dest(BUILD_DIR+'/fonts'));
});
This makes sure that all the other tasks run only after the clean task has finished.
(2) Use run-sequence in your build-qa task:
var runSequence = require('run-sequence');
gulp.task('build-qa', function(cb) {
runSequence('clean',['fonts','images','partials','usemin-qa'], cb);
});
This runs the clean task first and then all the other tasks in parallel.

Gruntfile.js error on windows

I am following this tutorial Link. I am using a windows PC
My SASS version is 3.4.16
This is my Gruntfile.js
module.exports = function(grunt) {
// Read package.json
grunt.file.readJSON('package.json');
//Initialize grunt
grunt.initConfig({
// Sass task
sass: {
// Sass development options
dev: {
options: {
style: 'expanded',
},
files: {
'css/main.css': 'css/sass/dev.scss'
}
},
// Sass distribution options
dist: {
options: {
style: 'compressed'
},
files: {
'css/main.css': 'css/sass/main.scss'
}
}
},
});
// Load tasks
grunt.loadNpmTasks('grunt-contrib-sass');
// Create Default Task
grunt.registerTask('dev', [
'sass:dev' // Compile Sass with dev settings
]);
// Create Distribution Task
grunt.registerTask('dist', [
'sass:dist' // Compile Sass with distribution settings
]);
}
When I reun this code i get an error as
Running "sass:dist" (sass) task Errno::ENOENT: No such file or
directory # rb_sysopen - undefined Use --trace for backtrace.
Warning: Exited with error code 1 Use --force to continue.
Could someone please help me with this.

Testing with Grunt, Mocha, Require.js and PhantomJS

I'm trying to setup this configuration, but I need help. I'm trying to use: https://github.com/accordionpeas/grunt-mocha-require-phantom.
My structure:
build-dev/ <-- Generated by grunt
vendor/
js/
jquery.js
require.js
js/
model/
cache.js <-- File to be tested
tests/
cache.js <-- Test for a file
tests.js <-- like test-bootstrap.js
My gruntfile config is:
mocha_require_phantom:
devel:
options:
base: 'build-dev/js'
main: 'tests'
requireLib: '../vendor/js/require.js'
files: ['tests/**/*.js']
port: 3001
My tests.js (test-bootstrap.js) is:
require.config({
paths: {
jquery: '../vendor/js/jquery',
chai: '/node_modules/chai/chai'
},
baseUrl: '/'
});
mocha.setup({
ui: 'bdd'
});
require([testPathname], function() {
if (window.mochaPhantomJS) {
return mochaPhantomJS.run();
} else {
return mocha.run();
}
});
My tests/cache.js is:
define(['chai', 'model/cache'], function(chai, cache) {
var should;
should = chai.should();
return describe('test suite 1', function() {
return it('should work', function() {
return cache.test().should.be.equal(5);
});
});
});
The problem is it's not working. It can't load model/cache. I was trying to change baseUrl in tests.js (like test-bootstrap.js). I was also trying to change baseUrl in grunt. I was trying to add path: model: ../../js/model, but it was ignored.
I need to call for a model as model/cache, how do I have to set up things to make it work? Should I use another plugin - which one?
Edit: Fixed typos.

Categories

Resources