Как справиться со всем процессом минификации/углифации

Так что я могу объяснить это вам, используя gulp вместо ворчания.

Как мне использовать их в моем index.html?

Вы можете поместить файлы JS и CSS в свой html. В html мы можем указать комментарии, говорящие, какие файлы должны быть скомпилированы вместе с файлом назначения, используя Bower.

Например:-

<!-- build:css styles/vendor.css -->
  <!-- bower:css -->
  <link rel="stylesheet" href="/bower_components/angular-material/angular-material.css" />
  <link rel="stylesheet" href="/bower_components/angular-ui-router-anim-in-out/css/anim-in-out.css" />
  <link rel="stylesheet" href="/bower_components/video.js/dist/video-js.css" />
  <link rel="stylesheet" href="/bower_components/angular-tooltips/dist/angular-tooltips.min.css" />
  <link rel="stylesheet" href="/bower_components/nvd3/build/nv.d3.css" />
  <!-- endbower -->
  <!-- endbuild -->

Теперь, если вы видите, что приведенные выше файлы css компилируются в vendor.css, когда вы запускаете скрипт gulp. Теперь в gulp-скрипте вы можете указать возможность укрупнения и минимизации.

Точно так же вы можете поместить файлы js. Вот как происходит углифация и минификация.

gulp.src('app/*.html')
    .pipe(assets)
    .pipe($.if('*.js', $.uglify()))
    .pipe($.if('*.css', $.minifyCss({
      compatibility: '*'
    })))

Если вы uglify/minify теперь, ваш index.html имеет следующее: -

  <link rel="stylesheet" href="/styles/vendors.css" />

Как мне переключиться с разработки на рабочую версию?

Вы можете сохранить вложенный файл JSON и создать отдельные элементы для dev, prod и local, сохранить здесь необходимые настройки и использовать их в gulp при компиляции проекта.

{
  "dev": {
   //required keys
   },
  "prod" :{
  //required keys
}

Какой должна быть структура папки моего веб-сайта? Должен ли я по-прежнему содержать неизображенные файлы?

Структура вашего сайта может быть такой:

• app
  • scripts
  • стили
  • шрифты
  • index.html
• Bower.json
• gulpfile.js

другой способ - использовать плагин gulp-useref, помещая комментарии внутри html-файла, чтобы пометить все js-файлы и назвать полученный пакет.

в html файле

<!-- build:js bundle.js -->
<script src="js/jsfile1.js" ></script>
<script src="js/jsfile2.js" ></script>
<script src="js/jsfile3.js" ></script>
<!-- endbuild -->

в gulpfile.js

gulp.task('build', function(){
   gulp.src('app/*.html')
   .pipe(useref())
   .pipe(gulpIf('*.js', uglify()))
   .pipe(gulp.dest('build'));
});

это приведет к созданию одного мини-файла js bundle.js с соответствующей ссылкой в ​​html-файле.