Gulp 구축 angularjs 프로젝트

전언
Angular와 ionic를 접촉한 지 한 달여가 지났는데, 길에서 계속 구덩이를 밟았다.그러나 정상적으로 새로운 것을 배우려면 구덩이를 밟을 준비를 해야 한다.그렇다면 왜 이 구축 지침서를 써야 합니까?가장 큰 원인은 이 방면의 자료를 열심히 찾고 각종 견해에 발버둥치는 학우들에게 참고를 하기 위해서이다. 동시에 나도 자신의 경험을 기록하여 쌍방이 모두 좋게 하기 위해서다.
잔말 말고 코드로 바로 올라가세요.
gulp 설치부터 시작

npm install -g gulp //    gulp
npm install --save-dev gulp //      gulp

npm 패키지 전체, 여기에서 당신이 원하는 플러그인, 그리고 대응하는 설치 명령을 찾습니다
1. 프로젝트 루트 디렉터리에gulpfile을 새로 만듭니다.js 파일, 필요한gulp 플러그인 도입

var gulp = require('gulp');
var uglify = require('gulp-uglify'); //  
var concat = require('gulp-concat');//  
var ngHtml2Js=require('gulp-ng-html2js');//ng       js

2.gulp퀘스트 작성

//    angularjs  
gulp.task('html2js', function () {
  return gulp.src("templates/**/*.html")//   
    .pipe(ngHtml2Js({
      moduleName: "template"
    }))//html   js  
    .pipe(concat("templates.js"))//  
    .pipe(uglify({compress:false}))//  
    .pipe(gulp.dest("build/js/"));//    
});

   gulp html2js

흑마법 배치가 이렇다.명령을 실행하면 압축된 파일을 사용할 수 없습니다.무슨 꿍꿍이속이야?구덩이가 여기에 있다. (구덩이1) 문제가 발생한 이유는 압축 후 변수가 e, s, t 등으로 바뀌었기 때문에 주입에 의존해야 하는 방법은 중괄호 주입을 사용하지 않았고function의 매개 변수에서 직접 사용하기 때문에 압축 후에 주입에 의존해야 하는 모듈을 식별할 수 없기 때문이다.예를 들면 다음과 같습니다.

var module= angular.module('homeApp', ['ui.router']);  
module.config(function ($sceProvider) {  
    $sceProvider.enabled(false);  
})  

다음으로 변경:

var module= angular.module('homeApp', ['ui.router']);  
module.config(['$sceProvider',function ($sceProvider) {  
    $sceProvider.enabled(false);  
}])  

모든 의존 주입은 이런 패턴을 엄격히 써야 한다. 모든 것을 기억해라!!!
(갱2)gulp 작업 중의moduleName: "template"라는 매개 변수는 병합된 파일의 모듈 이름으로angularjs에 의존하여 주입된 특성에 따른다.우리는 그것을 앱에 주입해야 한다.js 시작 파일에 있습니다.

club=angular.module('club', ['ionic','directives','controllers','service','template'])

(구덩이3)
위의 절차를 통해 우리는 개발 과정에서 html 템플릿이 js 파일로 압축되었다는 것을 알 수 있다. 그러면 루트 설정 안의templateUrl은 압축된 js 템플릿 파일과 어떻게 대응해야 하는가?사실 우리가 상상하는 것처럼 그렇게 복잡하지는 않다. 왜냐하면gulp-ng-html2js 흑마법은 이미 우리를 도와 완성했기 때문이다. 우리는 대응 관계를 세심하게 대조하기만 하면 된다.

//     js      ，b     a  ，b js   html   。a         id。
$templateCache put("a","b")

//               ，    


//            
templateUrl: 'a'

//a             html    。  ：
templateUrl: 'templates/home/index.html'

지식점
ng-template 지식점 참고글 타오바오 npm경상,cnpm.npm보다 속도가 빨라Gulp.js 홈페이지
마무리: 만약에 어떤 잘못이나 불합리한 부분이 있으면 댓글의 피드백을 환영합니다. 저는 제때에 정정할 것입니다.고마워요 고마워요