Visual Studio 코드 - 컴파일 된 TypeScript를 축소하고 난독 화합니다.

Question

Visual Studio 코드에 TypeScript 프로젝트가 있습니다.

TypeScript를 JavaScript로 컴파일 한 후 컴파일 된 JavaScript가 자동으로 축소되고 난독 화되기를 바랍니다.

그들은 많은 minifier 있지만 거기에 매번 수동으로 실행하지 않고 하나의 워크 플로우에 통합하고 싶습니다.

가장 이상적인 솔루션은 Visual Studio 코드 확장이지만 필자는 TypeScript를 미리 컴파일하지 않은 Minify JavaScript 확장을 찾을 수 없었습니다.

그렇지 않으면 Visual Studio 코드에서 제공하는 tasks.json을 사용하여 Gulp를 프로세스에 통합하고 싶습니다. 그게 유일한 방법이라면 그 일을하는 방법에 대한 설명이 좋을 것입니다.

이 기사를 읽었지만 Gulp와 Visual Studio 코드를 가장 적합한 방법으로 통합하는 방법을 완전히 이해했다고 말할 수는 없습니다. 나는 전에 Gulp과 일한 적이 없다.

https://code.visualstudio.com/docs/editor/tasks

Answer 1

는 사실 꿀꺽 -이 경우에 - 당신이 필요로하는 것입니다. 다른 자바 스크립트 작업 자동화가 있지만 꿀꺽 꿀꺽 마시는 것이 좋은 선택 인 것 같습니다. 꿀꺽 꿀꺽 마는 것으로 당신의 타이프 스크립트와 scss 파일을 컴파일하고, 이미지와 같은 자원을 복사 할 수 있습니다.

먼저 당신은 "-말대꾸를 꿀꺽 '하는 SCS를 컴파일, 타이프 라이터"꿀꺽 - 타이프 라이터 "를 컴파일하면"꿀꺽의 sourcemaps "을 필요로 또한

npm install gulp --save-dev 

NPM을 통해 꿀꺽를 설치해야하고,"꿀꺽 - 작게하다 " 파일 축소를 위해 :

npm install gulp-sourcemaps gulp-typescript gulp-sass gulp-minify 

내 소스 (타이프 라이터 파일) "/ SRC/클라이언트"에있는 컴파일 된 프로젝트는, "/ DIST/클라이언트"에 있어야 또한 내가 프로젝트를 빌드하기 전에 DIST 폴더마다 삭제 다시. 나는 그것의 청소기를 생각한다. 이를 위해 당신은 또한 "델"모듈 이제

npm install del 

당신의 작업으로 gulpfile.js를 구축하는 그것의 시간이 필요합니다,이 불량한은 모듈을 가져 오기로 시작해야합니다

var _gulp = require('gulp') 
var _sourcemaps = require('gulp-sourcemaps') 
var _typescript = require('gulp-typescript') 
var _sass = require("gulp-sass") 
var _minify = require('gulp-minify'); 

를 그런 다음, 첫 번째 작업은 다음과 같이 청소해야합니다.

_gulp.task('clean-frontend', function(done) { 
    return _del(['./dist/client'], done); 
}); 

여기에서 "clean-frontend"라고하는 꿀꺽 거리는 작업을 만듭니다. 여기서 한 일은 "dist/client"디렉토리를 제거하는 것입니다.

다음 작업은 이미지와 같은 프런트 엔드 리소스를 클라이언트 디렉토리에 복사하는 것입니다. 요약하면 scss 나 typescript 파일은 아닙니다. 당신은 당신의 작업 "복사 프론트 엔드 - 자원"전화로 만들기 :

이

_gulp.task('copy-frontend-resources',() => { 
    _gulp.src([config.frontend.sourceFolder + '/**/*', "!**/*.ts", "!**/*.scss"]).pipe(_gulp.dest('./dist/client')) 
}) 

다음 단계는 자바 스크립트 당신이 밑줄, 각도, JQuery와, systemjs처럼 사용하는 라이브러리, 지금 당신이 필요를 복사하는 것입니다.("밑줄"에서 _로 * 수입) 당신이 당신의 타이프 스크립트 파일에서 가져올 수 있습니다 그 후

npm install underscore 

과에서 사용 : 브라우저 프론트 엔드에 밑줄 같은 라이브러리가 필요하면 당신은 단순히 같은 NPM에 설치 개발. 브라우저는 루트 디렉토리가/dist/client이기 때문에 프로젝트 루트 디렉토리의/node_modules 폴더에 액세스 할 수 없기 때문에 라이브러리를 복사해야합니다. 이를 위해 당신은 당신처럼 사용 NPM 모듈의 배열을 만들 : 밑줄이있는 동안, 자신의/DIST을 가지고 당신이 systemjs을 볼 수 있습니다 당신은 단지 그것의 자바 스크립트 파일이있는 모든 라이브러리를 확인해야

let usedLibs = [ 
    'systemjs/dist/*.js', 
    '@angular/**/bundles/**', 
    'rxjs/**/*.js', 
    'zone.js/dist/*.js', 
    'reflect-metadata/*.js', 
    'jquery/dist/*.js', 
    'underscore/*.js' 
] 

을 자신의 그의 뿌리에. 자, 이제이 "/ DIST/클라이언트/lib에"폴더에 node_modules의 모든 라이브러리를 복사합니다 작업을하자 :

_gulp.task('copy-frontend-libraries',() => { 
    _gulp.src(usedLibs, { 
     cwd: "node_modules/**" 
    }).pipe(_gulp.dest('./dist/client/lib')); 
}) 

다음 작업, 그것은 "우리의 모든 SCS들을 아주 간단 컴파일한다 CSS 파일에 SRC/클라이언트 "폴더 :

let compilerOptions = { 
    removeComments: true, 
    target: "es6", 
    moduleResolution: "node", 
    module: "commonjs", // you can choose "AMD" too 
    experimentalDecorators : true, 
    allowSyntheticDefaultImports : true 
} 

를 그리고 작업을 만들 :

이

_gulp.task('build-frontend-css',() => { 
    _gulp.src(['src/client/**/*.scss']) 
     .pipe(_sass({ style: 'expanded' })) 
     .pipe(_gulp.dest('./dist/client')); 
}) 

마지막 작업은 타이프 스크립트 파일을 컴파일, 여러분은 여러분의 필요에 컴파일러 속성을 조정할 수 있습니다

_gulp.task('build-frontend-angular',() => { 
    var typescriptProject = _typescript.createProject(compilerOptions); 
    var typescriptResult = _gulp.src(['./src/client/**/*.ts']) 
     .pipe(_sourcemaps.init()) 
     .pipe(typescriptProject()) 
     .pipe(_sourcemaps.write()) 
     .pipe(_gulp.dest('./dist/client_debug')) 
}) 

클라이언트 폴더에서 복사하기 전에 크기를 줄이기 위해 여기에 파일을 "client_debug"디렉토리에 복사합니다.

_gulp.task('compress-frontend', function() { 
    _gulp.src('./dist/client_debug/*.js') 
    .pipe(_minify({ 
     ext:{ 
      src:'-debug.js', 
      min:'.js' 
     }, 
    })) 
    .pipe(_gulp.dest('./dist/client')) 
}); 

이제 우리는 우리의 모든 작업을 완료해야하고 한 번에 모두를 실행하는 함수를 필요라는 루트 작업을 만드는 "구축"하는 것이 우리가 할 : minifier는 자사의 작업을 수행합니다. 은 "클린 프론트 엔드"는 gulp.start 배열 내부 아니라고, 참고, 그것은 (gulp.start 다른 후 한 번에 모두가 아니라 하나의 실행) 오류가 발생 :

_gulp.task('build', [ 
    'clean-frontend', 
], (done) => { 
    // Alles gecleaned, weiter mit build 
    _gulp.start(
     [ 
      'copy-frontend-resources', 
      'copy-frontend-libraries', 
      'build-frontend-css', 
      'build-frontend-angular', 
      'compress-frontend' 
     ],() => { 
      done() 
     } 
    ) 
}); 

좋아! Puh, 먼 길,하지만 지금 우리는 그것을 테스트하고 싶다! 명령 줄에 들어가서 프로젝트 디렉토리에서 cd를 시작합니다. gulpfile.js의 모든 꿀꺽 꿀꺽한 작업을 gulp NAMEOFTASK (예 : gulp build)으로 실행할 수 있지만 gulp compress-frontend과 같은 단일 작업 중 하나를 실행할 수도 있습니다.

마지막 단계는 watcher를 추가하는 것입니다. watcher는 src 디렉토리에서 파일을 변경하면 위의 모든 작업을 자동화합니다. 난 당신이 NPM 모듈 내부에 뭔가를 변경하지 않은 추측 때문에,

_gulp.task('watch', function() { 
    // Watch frontend 
    _gulp.watch(
     ['./src/**/*'], 
     [ 
      'copy-frontend-resources', 
      'build-frontend-css', 
      'build-frontend-angular', 
      'compress-frontend' 
     ] 
    ).on('change', function (e) { 
     console.log('File ' + e.path + ' has been changed. Updating/Compiling.'); 
    }); 
}); 

작업 "복사 프론트 엔드 - 라이브러리가"여기에 필요하지 않을 것입니다 :이 경우를 들어 같은 다른 작업을 추가합니다. 당신은 당신이 볼

gulp watch 

와 시계 작업을 실행할 수 있습니다, 정말 VS 스튜디오 코드에서 "통합"아니, 당신이 할 모든이의 단자를 사용하여 "꿀꺽 꿀꺽 시계"를 실행하는 것입니다 없다, 또는 "꿀꺽 빌드 ". 그게 다야.

BUT! 더있다! 더 시원한 것은 패키지를 수정할 때입니다.json을 뭔가 linke에 :

(...) 
"scripts": { 
    "build": "gulp build", 
    "watch": "gulp watch", 
} 
(...) 

이제 "npm run build"또는 "npm run watch"를 실행할 수 있습니다. gulp 명령 대신.

도와 드리겠습니다.