gulp에서 수행하는 구문 검사 요약

안건으로 gulp를 사용하고 있는 환경에 맞았으므로, eslint나 htmlhint 주위의 메인터넌스와 비망록gulp-eslint 등을 조사하면 과거의 기사가 히트하기 때문에 공식을 보면서 재검토해 간다

gulp-eslint

※ .eslintrc 는 작성되고 있는 전제로 진행합니다

1. gulp-eslint 설치

npm i -D gulp-eslint

gulp-eslint 설치
사용하는 것은 이것만

다른 사이트에서 plumber 라든지 node-notifier 를 사용하고 있지만 사용하지 않음console.error 어쨌든

2. eslint 태스크 생성

gulp-eslint 공식: https://www.npmjs.com/package/gulp-eslint

gulp.task('lint', () => {
    return gulp.src(['**/*.js','!node_modules/**'])
        .pipe(eslint({ useEslintrc: true })) // .eslintrc を参照
        .pipe(eslint.format())
        .pipe(eslint.failAfterError());
});

거의 공식적인 코드를 가져온 것만
다른 것은 ({useEslintrc: true})정도

useEslintrc

이 옵션은 .eslintrc 파일을 사용하여 확인할지 여부 플래그true 로 하면 디렉토리에 놓여 있는 .eslintrc 파일로 체크해준다

파일을 사용하지 않으면 설정을 전달하여 확인할 수 있습니다.

ESLint 첫 단계 - 규칙 옵션 사용

gulp.src(['**/*.js','!node_modules/**'])
    .pipe(eslint({
        rules: {
            'my-custom-rule': 1,
            'strict': 2
        },
        globals: [
            'jQuery',
            '$'
        ],
        envs: [
            'browser'
        ]
    }))
.pipe(eslint.format())
.pipe(eslint.failAfterError());

eslint.format

터미널에 로그를 출력하는 기능console.error 등으로 수동으로 내놓지 않아도 기능이 있으므로 사용합시다.
로그는 이런 식으로 알기 쉽게 표시됩니다.

eslint.format()

옵션으로 출력할 형식을 선택할 수 있습니다.
다른 옵션 checkstyle 를 사용해 보면 이런 식으로 포맷되지 않은 상태로 표시됩니다

eslint.format('checkstyle')

그 밖에도 개별적으로 다양한 로그의 표시를 설정할 수 있다고 생각합니다만, 여기는 디폴트인 채로 좋다고 생각한다

eslint.failOnError

작업을 중지하고 오류를 출력한다는 것
도중에 멈춰 버리기 때문에 eslint 태스크 자체도 멈추고 1건만 표시된다

gulp.task('lint', () => {
    return gulp.src(['**/*.js','!node_modules/**'])
        .pipe(eslint({ useEslintrc: true })) // .eslintrc を参照
        .pipe(eslint.format())
        .pipe(eslint.failOnError());
});

eslint.failAfterError

이것은 모든 작업이 완료된 후 처리를 중지하고 오류를 출력합니다.
따라서 모든 오류를 표시 할 수 있습니다.

gulp.task('lint', () => {
    return gulp.src(['**/*.js','!node_modules/**'])
        .pipe(eslint({ useEslintrc: true })) // .eslintrc を参照
        .pipe(eslint.format())
        .pipe(eslint.failAfterError());
});

eslint.result

eslint에서 감지한 오류 객체를 여기에서 검색할 수 있습니다.

{
  filePath: '/hoge.js', //問題の起きたファイルのパス
  messages: [ [Object], [Object] ],
  errorCount: 2, //エラーの件数
  warningCount: 0, //warrningの件数
  fixableErrorCount: 0,
  fixableWarningCount: 0,
  source: 'エラーが発生した内容'
}

이런 덩어리로 들어 있기 때문에 공식에서는 아래와 같이 에러의 건수를 표시하고 있다

gulp.task('eslint', () => {
    return gulp.src(['**/*.js','!node_modules/**'])
        .pipe(eslint({ useEslintrc: true })) // .eslintrc を参照
        .pipe(eslint.format())
        .pipe(eslint.results(results => {
          //Called once for all ESLint results.
          console.log(`Total Results: ${results.length}`);
          console.log(`Total Warnings: ${results.warningCount}`);
          console.log(`Total Errors: ${results.errorCount}`);
    }));
});

3. 시작시 작업을 활성화할지 watch로 움직이는지

시작할 때 작업을 실행하려면 빌드와 함께 실행

gulp.task("default",['build','eslint'])

이후는 watch 로 변경이 있던 파일만 lint로 체크한다

gulp.task('eslint', () => {
    return gulp.src(['**/*.js','!node_modules/**'])
        .pipe(eslint({ useEslintrc: true })) // .eslintrc を参照
        .pipe(eslint.format())
        .pipe(eslint.results(results => {
          //Called once for all ESLint results.
          console.log(`Total Results: ${results.length}`);
          console.log(`Total Warnings: ${results.warningCount}`);
          console.log(`Total Errors: ${results.errorCount}`);
    }));
});

gulp.task("default",['eslint'], function() {
  gulp.watch("src/**/*.js",function(e){
    gulp.src(e.path)
    .pipe(eslint({ useEslintrc: true })) // .eslintrc を参照
    .pipe(eslint.format());
  });
});

끝

gulp을 사용하는 사건도 점점 줄어 들었지만, 대기업 등에서는 아직 현역이고
gulp 자체는 사용하기 쉽기 때문에 다양한 공부가되었습니다.

이런 글쓰기 있어! 그렇다면 알려 주시면 감사하겠습니다.