角度 - index.htmlのすべてのJSファイルをマージするためのベストプラクティス

Question

私のindex.htmlにすべてのサービスとコントローラのJSファイルがリストされている角度アプリがあります。

これらの行の多く<script src="services/loginService.js"></script>

私はこれを単純化し、ちょうど1つのjsファイル（縮小版です）を参照したいと思います。

これを行うのに便利なツールはありますか？

私はギャルを推測していますか？

アドバイスをいただければ幸いです。

ありがとうございました。一息で

Answer 1

次のように、あなたはそれを行うことができます。

をここに私がローカルに設定されているサンプルgulpfileです。 scriptsタスクまたはuserefタスクを使用できます。 Userefでは、どのファイルを縮小するかを指定できます。あなたのHTML内

// Include gulp 
var gulp = require('gulp'); 

// Include Our Plugins 
var jshint = require('gulp-jshint'); 
var sass = require('gulp-sass'); 
var concat = require('gulp-concat'); 
var uglify = require('gulp-uglify'); 
var gulpIf = require('gulp-if'); 
var rename = require('gulp-rename'); 
var babel = require('gulp-babel'); 
var webserver = require('gulp-webserver'); 
var connect = require('gulp-connect'); 
var gulpIgnore = require('gulp-ignore'); 
var useref = require('gulp-useref'); 
var minifyCSS = require('gulp-minify-css'); 
var autoprefixer = require('gulp-autoprefixer'); 
var rename = require('gulp-rename'); 
var cssnano = require('gulp-cssnano'); 
var imagemin = require('gulp-imagemin'); 

var outputDir = 'dist'; 
var jsLintIgnore = 'app/js/bootstrap-3.3.6/**/*.js'; 

// run a local webserver from app directory 
gulp.task('webserver', function() { 
    gulp.src('app') 
    .pipe(webserver({ 
     livereload: true, 
     fallback: './src/index.html', 
     //port: 8000, // Default is 8000 
     //directoryListing: true, 
     open: true 
    })); 
}); 

// Lint Task - checks any JavaScript file in our js/ directory and makes sure there are no errors in our code. 
gulp.task('lint', function() { 
    return gulp.src('app/js/**/*.js') 
     .pipe(jshint()) 
     //.pipe(gulpIgnore.include(jsLintIgnore)) 
     .pipe(jshint.reporter('default')); 
}); 


gulp.task('useref', function(){ 
    return gulp.src('app/*.html') 
    .pipe(useref()) 
    // Minifies only if it's a JavaScript file 
    .pipe(gulpIf('js/**/*.js', uglify())) 
    .pipe(gulpIf('css/**/*.css', cssnano())) 
    .pipe(gulp.dest('dist')) 
}); 

// Compile Our Sass - compiles any of our Sass files in our scss/ directory into CSS and saves the compiled CSS file in our dist/css directory. 
gulp.task('sass', function() { 
    return gulp.src('app/scss/**/*.scss') 
     .pipe(sass()) 
     .pipe(gulp.dest('app/css')); 
}); 

gulp.task('css', function(){ 
    gulp.src('app/css/**/*.css') 
     .pipe(minifyCSS()) 
     .pipe(rename('style.min.css')) 
     .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9')) 
     .pipe(gulp.dest('dist/css')) 
}); 

gulp.task('images', function(){ 
    return gulp.src('app/images/**/*.+(png|jpg|gif|svg)') 
    .pipe(imagemin()) 
    .pipe(gulp.dest('dist/images')) 
}); 

// Concatenate & Minify JS - concatenates all JavaScript files in our js/ directory and saves the ouput to our dist/js directory. Then gulp takes 
// that concatenated file, minifies it, renames it and saves it to the dist/js directory alongside the concatenated file. 
gulp.task('scripts', function() { 
    return gulp.src('app/js/**/*.js') 
     .pipe(concat('all.js')) 
     .pipe(gulp.dest('dist')) 
     .pipe(rename('all.min.js')) 
     .pipe(uglify()) 
     .pipe(gulp.dest('dist/js')); 
}); 

// Watch Files For Changes - run tasks as we make changes to our files. 
gulp.task('watch', function() { 
    gulp.watch('app/js/**/*.js', ['lint', 'scripts']); 
    gulp.watch('app/scss/**/*.scss', ['sass']); 
}); 

// Default Task - used as a grouped reference to our other tasks. This will be the task that is ran upon entering gulp into the command line without any additional parameters. 
gulp.task('default', ['webserver', 'lint', 'sass', 'useref','images', 'watch']); 

次でminifedあなたが望んでいたのjsファイルをラップします：あなたのdistフォルダにJS/main.min.js：これはと呼ばれる縮小さのファイルを作成します

<!--build:js js/main.min.js --> 

<script src="/js/script1.js"></script> 
<script src="/js/script2.js"></script> 
<script src="/js/script3.js"></script> 

<!-- endbuild --> 

を。ご覧のとおり、私は自分のcssファイルで同じことをやっています。ここで

- Root Folder 
    - /app (development environment) 
    - /css 
    - /images 
    - /js 
    - /scss 
    - index.html 
    - /dist (production version of site here) 
    - /css 
    - /images 
    - /js 
    - index.html 
    - /node_modules 
    - bower.json 
    - gulpfile.js 
    - package.json 

：ご使用の環境に合わせて

<!--build:css css/styles.min.css--> 
    <link rel="stylesheet" href="/css/styles1.css"> 
    <link rel="stylesheet" href="/css/styles2.css"> 
    <link rel="stylesheet" href="/css/styles3.css"> 
    <!--endbuild--> 

この一気ファイルは次のディレクトリ構造を前提としていますが、それを変更することができます：あなたは、特定のまたはすべてのCSSファイルをターゲットにするだけでなく、タグでそれらをラップすることができますギャルを始めるにあたって素晴らしいYouTubeシリーズです。 https://www.youtube.com/watch?v=dwSLFai8ovQ

今、私はすべてのことを言って、私はwebpackを好む。しかし、Gulpは良いスタート地点になるかもしれませんが、少し険しい学習曲線があります。