del 모듈로 특정 디렉터리 및 파일 삭제

del 모듈로 특정 디렉터리 및 파일 삭제

간혹 테스트 목적으로 파일을 생성하다 보면, 생성했던 파일을 삭제하고 테스트해야 할 상황이 발생합니다.
이때를 가정하여 업무를 수행할 때마다 기존 파일을 삭제한 후 새 파일을 생성하는 업무를 정의해 보겠습니다.
다음을 참고하여 폴더 및 파일을 삭제하는 del 모듈을 현재 디렉터리에 로컬 설치합니다. gulpfile.js 파일의 위쪽에서 del 모듈을 호출하고, 폴더 및 파일을 삭제하는 새로운 모듈을 정의합니다.
업무 이름은 clean으로 설정하고, 내부 코드는 del() 함수를 사용하여 삭제하려는 폴더 또는 파일 경로를 배열 데이터로 전달합니다.

                    
                        const gulp = require('gulp');
                        const stylish = require('jshint-stylish');
                        const jshint = require('gulp-jshint');
                        const uglify = require('gulp-uglify');
                        const concat = require('gulp-concat');
                        const rename = require('gulp-rename');
                        const del = require('del');

                        const path = {
                            js: {
                                src: 'src/js/libs/**/*.js',
                                dest: 'dist/',
                                filename: 'DOMlibrary.js'
                            }
                        };

                        // 파일 삭제
                        gulp.task('clean', function () {
                            return del([path.js.dest]);
                        });

                        // JS 문법 검사
                        gulp.task('js:hint', function () {
                            return gulp.src(path.js.src)
                                .pipe(jshint())
                                .pipe(jshint.reporter(stylish));
                        });

                        // JS 병합
                        gulp.task('js:concat', function () {
                            return gulp.src(path.js.src)
                                .pipe(concat(path.js.filename))
                                .pipe(gulp.dest(path.js.dest));
                        });

                        // JS 압축
                        gulp.task('js:uglify', function () {
                            return gulp.src(path.js.dest + path.js.filename)
                                .pipe(uglify())
                                .pipe(rename({suffix: '.min'}))
                                .pipe(gulp.dest(path.js.dest));
                        });

                        // JS 문법검사 > 병합 > 압축
                        gulp.task('scripts',
                            gulp.series('clean', 'js:hint', 'js:concat', 'js:uglify')
                        );

                        // Gulp.task()를 사용해 기본(Default) 테스크 정의
                        gulp.task('default', function () {
                            // 콘솔(Console)에 메시지 기록(log)
                            console.log('gulp default 일이 수행되었습니다.');
                        });
                    
                

깨알 Tip
del(['dist/*', '!dist/dont-delete.js']) 명령어를 수행하면 [dist] 디렉터리에서 dont-delete.js를 제외한 모든 파일을 삭제합니다.
즉, 디렉터리/파일 경로 앞에 느낌표(!)를 붙이면 삭제 대상에서 제외됩니다.

Git Bash에서 clean 업무를 실행하면 설정한 대로 [dist] 폴더 자체가 삭제됩니다.
dist 폴더 안의 모든 파일을 삭제하려면 'dist/*' 라고 입력해야됩니다.
자세한 내용은 위 사진을 참고합니다.

디렉터리를 정리한 후 조합한 업무를 기본 업무로 정의할 수 있나요?

다음처럼 설정합니다. 그러면 scripts 업무 이전에 clean 업무가 실행됩니다.
그리고 default 업무에 설정했으므로 이후부턴 gulp 명령어만 입력해도 clean, scripts 업무가 순서대로 실행됩니다.
scripts 업무는 js:hint, js:concat, js:uglify 업무 순으로 연계해서 실행됩니다.

                    
                        const gulp = require('gulp');
                        const stylish = require('jshint-stylish');
                        const jshint = require('gulp-jshint');
                        const uglify = require('gulp-uglify');
                        const concat = require('gulp-concat');
                        const rename = require('gulp-rename');
                        const del = require('del');

                        const path = {
                            js: {
                                src: 'src/js/libs/**/*.js',
                                dest: 'dist/',
                                filename: 'DOMlibrary.js'
                            }
                        };

                        // 파일 삭제
                        gulp.task('clean', function () {
                            return del([path.js.dest + '*']);
                        });

                        // JS 문법 검사
                        gulp.task('js:hint', function () {
                            return gulp.src(path.js.src)
                                .pipe(jshint())
                                .pipe(jshint.reporter(stylish));
                        });

                        // JS 병합
                        gulp.task('js:concat', function () {
                            return gulp.src(path.js.src)
                                .pipe(concat(path.js.filename))
                                .pipe(gulp.dest(path.js.dest));
                        });

                        // JS 압축
                        gulp.task('js:uglify', function () {
                            return gulp.src(path.js.dest + path.js.filename)
                                .pipe(uglify())
                                .pipe(rename({suffix: '.min'}))
                                .pipe(gulp.dest(path.js.dest));
                        });

                        // JS 문법검사 > 병합 > 압축
                        gulp.task('scripts',
                            gulp.series('js:hint', 'js:concat', 'js:uglify')
                        );

                        // Gulp.task()를 사용해 기본(Default) 테스크 정의
                        gulp.task('default',
                            gulp.series('clean', 'scripts')
                        );