javascript - Angular - 合并index.html中所有JS文件的最佳实践

Question

我有我的 Angular 应用程序，其中我的 index.html 列出了我的所有服务和 Controller JS 文件。

例如很多这样的行<script src="services/loginService.js"></script>

为了投入生产，我想简化这一点，只引用一个 js 文件(这是一个缩小版本)。

人们发现哪些工具对完成此任务有用？

我猜是吞咽了？

如有任何建议，我们将不胜感激。

谢谢。

Answer 1

在gulp中，你可以按如下方式进行:

这是我在本地设置的示例 gulpfile。您可以使用 script 任务或 userref 任务。 Useref 允许您指定应缩小哪些文件。

// 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']);

在你的 html 中，你可以用以下内容包装你想要压缩的 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 -->

这将在您的 dist 文件夹中创建一个名为:js/main.min.js 的缩小文件。正如你所看到的，我对我的 css 文件做了同样的事情。您也可以将它们包装在标签中以定位某些或所有 css 文件:

  <!--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-->   

此 gulp 文件采用以下目录结构，但您可以更改它以适合您的环境:

- 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

这是一个关于 gulp 入门的精彩 YouTube 系列。 https://www.youtube.com/watch?v=dwSLFai8ovQ

话虽如此，我更喜欢 webpack。不过，它的学习曲线有点陡峭，因此 Gulp 可能是一个不错的起点。