Gulp html minify: gulp-minify-html — npm

Этот пакет не используется никакими пакетами NuGet.

Этот пакет не используется никакими популярными репозиториями GitHub.

Версия	загрузок	Последнее обновление
1.0.6733	902	6/9/2018
1. 0.6685	891	21.04.2018
1.0.6556	780	13. 12.2017
1.0.6532	718	19.11.2017
1. 0.6523	733	12.11.2017
1.0.6477	720	25. 09.2017
1.0.6465	735	13.09.2017
1. 0.6448	769	27.08.2017
1.0.6440	764	19. 08.2017

Используйте Gulp, чтобы упростить рабочий процесс angularjs · soyuka.me

Я часто вижу, как у людей возникают проблемы с управлением внедрением угловых зависимостей, минификацией, шаблонами и т. д. У меня никогда не было таких проблем, потому что мой рабочий процесс на основе gulp уже обрабатывает все за меня.

Что не так

Например, angular DI, несмотря на то, что они устарели, ужасная нотация массива, является занозой в заднице. Ага, совсем не СУХОЙ:

 угловой.модуль('моймодуль')
.controller('SomeCtrl', SomeCtrl)
функция SomeCtrl($scope, $timeout) {}
//чувствуете дежавю?
SomeCtrl.$inject = ['$scope', '$timeout'];
 

Написание некоторых шаблонов, которые angular будет интерпретировать так, чтобы они были доступны в $templateCache , также отстой. Особенно, если вы хотите какой-то чистый способ сделать это. Используя javascript, это будет выглядеть примерно так:

 angular.module('myModule.templates')
.run(['$templateCache', функция($templateCache) {
  $templateCache.put('представления/список', '
')
}])
 

Но шаблон — это HTML, верно? Зачем писать HTML внутри Javascript? На самом деле я скопировал один из моих gulp-рендерил шаблоны , потому что я никогда этого не делал. Хорошо, я мог бы, но тогда я был угловатым новичком.

Исправить!

Внедрение зависимостей

Во-первых, используйте ng-annotate! (К вашему сведению: первая фиксация 3 сентября 2013 г.)

Это замечательный инструмент, который позаботится о DI за вас. Теперь вы можете написать:

 функция MyCtrl($scope) {}
 

И плагин добавит .$inject = ['$scope'] . Это хорошо и позволяет вам, помимо меньшего количества нажатий клавиш, сохранять более чистый код.

Шаблоны

Напишите свои шаблоны, используя HTML, HAML или что-то еще. Только не пишите сумасшедшие шаблоны в javascript! Это заставляет меня вспомнить конец 2006 года; при написании HTML внутри ужасного PHP-кода имело смысл!

Глотая фантазии

Для протокола: я следую этому руководству по стилю angular.

Возьмем следующую структуру:

Нам нужно:

• gulp-ng-annotate да, это ng-annotate в плагине gulp
• gulp-angular-templatecache преобразует html в угловые шаблоны
• gulp-minify-html ага, теперь мы можем похвастаться – и действительно уменьшить размер наших ресурсов
• gulp-jsclosure Мне действительно нужно оправдываться?
• gulp-uglify конечно, минимизация лучше
• gulp-concat мы используем хорошую структуру, но нам нужен только 1 файл
• gulp-rename Я хочу один main.js и main.min.js

При желании вы можете использовать gulp-plumber для управления ошибками потока, чтобы они не выбрасывались. Особенно раздражает, когда gulp завершает работу при использовании gulp watch .

Однострочная установка зависимостей:

 npm install gulp gulp-ng-annotate gulp-angular-templatecache gulp-minify-html gulp-jsclosure gulp-uglify gulp-concat gulp-rename --save-dev
 

И теперь мы можем написать gulpfile :

 // gulpfile.js
'использовать строгий'
const глоток = требуется ('глоток')
const templateCache = require('gulp-angular-templatecache')
const minifyHtml = требуется ('gulp-minify-html')
const concat = требуется ('gulp-concat')
const uglify = требуется ('gulp-uglify')
const rename = require('gulp-rename')
const ngannotate = require('gulp-ng-annotate')
константное закрытие = требуется ('gulp-jsclosure')
const p = требуется ('путь')
/**
* Конфигурация путей, которую легко изменить и/или использовать в нескольких задачах
*/
постоянные пути = {
  джаваскрипты: [
    './src/js/app.js',
    /*
     * этот файл не должен быть передан в git, вы пишете HTML!
     * он также не должен отслеживаться gulp, если он затем вызывает изменение
     * или gulp останется в бесконечном цикле (см.  ниже)
     */
    './src/js/templates.js',
    './src/**/*.js',
    './src/**/**/*.js'
  ],
  шаблоны: [
    './src/templates/*.html',
    './src/templates/**/*.html'
  ]
}
/**
* Берет шаблоны html и преобразует их в шаблоны angular (javascript)
*/
gulp.task('шаблоны', функция() {
  вернуть gulp.src(paths.templates)
   .pipe(minifyHtml({
        пусто: правда,
        запасной: правда,
        цитаты: правда
    }))
    .pipe(templateCache({
      модуль: 'myModule.templates',
      автономный: правда,
      /**
       * Здесь я удаляю .html, чтобы сохранить `$templateCache`
       * шаблон в `views/home` вместо `views/home.html`.
       * Я сохраняю структуру каталогов для имени шаблона
       */
      transformUrl: функция (url) {
        вернуть url.replace (p.extname (url), '')
      }
    }))
    // помещаем все это в наш файл javascript
    .pipe(concat('templates.js'))
    .pipe(gulp.dest('./src/js'))
})
/**
* Concat, закрытие, аннотирование, исправление скриптов
* @beforeDo `шаблоны глотка`
*/
gulp. task('скрипты', ['шаблоны'], function() {
  вернуть gulp.src(paths.javascripts)
    //сначала я создаю чистый файл main.js
    .pipe(concat('main.js'))
    .pipe (закрытие ({угловой: правда}))
    .pipe(ngannotate())
    .pipe(gulp.dest('./dist'))
    //затем убираем `main.js` и переименовываем его в `main.min.js`
    //изменение может вызвать проблемы с angular
    .pipe(uglify({искажать: ложь}))
    .pipe(переименовать('main.min.js'))
    .pipe(gulp.dest('./dist'))
})
/**
* Команда `gulp` разрешается в `gulp scripts`
*/
gulp.task('по умолчанию', ['скрипты'])
/**
* Следите за путями, которые вы хотите, и выполняйте задачу скриптов
* @beforeDo по умолчанию (небольшой полезный лайфхак)
*/
gulp.task('смотреть', ['по умолчанию'], function() {
  /**
   * Либо не добавляйте `templates.js` в пути js
   * и добавьте его позже в источник задач скриптов или удалите здесь.
   * Действительно, если за `templates.js` следят,
   * он запустит задачу шаблонов и может изменить файл.
   * Затем задача будет запущена снова и т.  д.
   * Вы можете использовать https://github.com/urish/gulp-add-src, чтобы добавить его в `скрипт`
   * источники.
   */
  пусть js = paths.javascripts.slice()
  js.splice(js.indexOf('./src/js/templates.js'), 1)
  gulp.watch(js, ['скрипты'])
})
 

И теперь мы можем кодировать в HTML, javascript и забыть о .$inject или уродливом javascripthtml во время кодирования!

Чтобы использовать $templateCache в своем приложении, вам просто нужно добавить myModule.templates в зависимости модуля и использовать $templateCache.get('views/home') .

Почувствуй силу глотка

Я ненавижу HTML, может быть, я написал большую часть его, может быть, просто потому, что закрывающие теги вызывают у меня ощущение «повторяйся». К счастью, в наши дни существует множество шаблонизаторов, которые компилируются в HTML. Я предпочитаю HAML, но следующий будет работать так же с Jade или любым другим.

Итак, я добавляю HAML в рабочий процесс. HAML необходимо преобразовать в HTML, а затем в шаблоны Angular.

Для HAML единственный подключаемый модуль, который всегда работал у меня, — это gulp-ruby-haml. Обратите внимание, что на самом деле это не следует философии gulp, в которой он просто выполняет команду haml .

Давайте установим это (вам понадобится haml ruby ​​gem):

 npm установить gulp-ruby-haml
 

Затем просто добавьте зависимость, измените расширения шаблонов и добавьте преобразование haml в html:

 Индекс: gulpfile.js
================================================== =================
--- gulpfile.js 2015-12-01 21:05:25.000000000 +0100
+++ gulpfile.js 2015-12-01 21:05:35.000000000 +0100
@@ -8,6 +8,7 @@
 const rename = require('gulp-rename')
 const ngannotate = require('gulp-ng-annotate')
 константное закрытие = требуется ('gulp-jsclosure')
+const haml = требуется('gulp-ruby-haml')
 const p = требуется ('путь')
 постоянные пути = {
@@ -23,13 +24,14 @@
 '.