Полный набор инструментов для AngularJS: Gulp, Browserify, Sass

Запуск проекта AngularJS также означает выбор всего набора инструментов, который идет вместе с Angular. В этом посте мы предложим набор инструментов, которые могут понадобиться новому проекту Angular, и представим простую сборку Gulp, которая предоставляет эти функции.

Давайте рассмотрим следующие темы:

• Почему глоток? Цели для базового углового построения
• Зачем использовать препроцессор CSS и почему Sass
• Преимущества модульной системы и почему браузеризация
• Предварительно заполнить угловой шаблонный кеш
• Угловая минимизация JavaScript
• Сокращение количества HTTP-запросов с использованием спрайтов
• Настройте веб-сервер разработки
• Запуск тестов с Karma, качество кода с JSHint и многое другое

Почему стоит выбрать Gulp?

Хотя есть и другие исполнители задач, кажется, что Gulp становится все более и более предпочтительным решением, поскольку он предоставляет следующие функции:

• Это супер быстро, так как он построен для параллелизма с самого начала
• Он предоставляет простой в освоении API (основанный на архитектуре каналов и фильтров), который создает некоторый очень читаемый и обслуживаемый код.

Цели хорошей угловой сборки

В идеале сборка для проекта Angular должна:

• Быть низкой сложности, в идеале не более 100 строк кода
• Быть молниеносным, порядка нескольких секунд
• Не подразумевать никаких зависимостей от неузловых цепочек инструментов
• Будьте абсолютно одинаковыми как в разработке, так и в производстве
• Решить некоторые специфичные для Angular проблемы: англоязычная минимизация Javascript и предварительное заполнение кэша шаблонов
• Обеспечить режим разработки для производительности разработчиков
• Разрешить запускать тесты и проверять качество кода
• Минимизируйте количество HTTP-запросов, необходимых для производства, с помощью CSS и Javascript, а также спрайтов изображений

Рабочая сборка и пример приложения

Чтобы сделать его более конкретным, приведем сборку и применили ее к примеру приложения: приложение TODO из проекта TODO MVC . Вы можете попробовать пример приложения   здесь .

Сборка и пример приложения также доступны в этом репозитории Github .
В следующих следующих разделах мы рассмотрим предлагаемый набор инструментов для проектов Angular и пройдемся по сборке Gulp, которая предоставляет эти функции.

Зачем использовать препроцессор CSS и почему Sass

Чтобы процитировать ежегодный радар Технологии Хотя в прошлом году:

Мы считаем, что времена рукописного CSS, для чего угодно, кроме обычной работы, прошли.

Ограничений простого CSS много, и это затрудняет написание поддерживаемых таблиц стилей. Хотя новые стандарты CSS3 устраняют многие из ограничений, широкое внедрение требует времени.

CSS расширенные возможности

Для создания поддерживаемого CSS нам действительно нужно:

• Механизм связывания CSS
• Механизм частичных операций, который позволяет разбивать CSS на логические порции, не генерируя дополнительные http-запросы.
• Возможность определения CSS-переменных ограниченной области
• Возможность встраивания связанных стилей в древовидную структуру
• Возможность определять CSS-функции

Все эти функции обеспечиваются множеством CSS-препроцессоров, доступных сегодня, с трудом, как выбрать один. Двумя основными из них являются Sass и Less .

Многие библиотеки построены поверх этих препроцессоров, которые инкапсулируют часто используемые шаблоны, см., Например, библиотеку Sass Compass .

Sass или Меньше?

Предпроцессор Less может показаться лучшим выбором для сборки на основе узлов, так как это также инструмент на основе узлов.

Но сегодня Sass больше не привязан к инструментальной цепочке Ruby, так как есть реализация Sass на Си ( libsass ), которая позволяет быстро компилировать Sass в среде узла с помощью плагинов, таких как gulp-sass .

Кроме того, индустрия, кажется, сходится вокруг Sass: посмотрите, например, этот пост на css-tricks . В конце концов, три основные причины, по которым я решил выбрать Sass:

• хорошая интеграция с узлом через libsass, нет необходимости устанавливать Ruby
• зная, что наиболее используемая библиотека Sass Compass портируется на libsass для Compass 2, посмотрите эту проблему на Github
• тот факт, что Angular Material Design основан на Sass , поэтому мы, вероятно, найдем его снова в будущем

Задача Build-css

Sass интегрирован в сборку gulp с помощью следующей build-cssзадачи:

gulp.task('build-css', ['clean'], function() {  
    return gulp.src('./styles/*')
        .pipe(sourcemaps.init())
        .pipe(sass())
        .pipe(cachebust.resources())
        .pipe(sourcemaps.write('./maps'))
        .pipe(gulp.dest('./dist'));
});

var express = require('express');

gulp.task('build-js', ['clean'], function() { 
    var b = browserify({
        entries: './js/app.js',
        debug: true,
        paths: ['./js/controllers', './js/services', './js/directives'],
        transform: [ngAnnotate]
    });

    return b.bundle()
        .pipe(source('bundle.js'))
        .pipe(buffer())
        .pipe(cachebust.resources())
        .pipe(sourcemaps.init({loadMaps: true}))
        .pipe(uglify())
        .on('error', gutil.log)
        .pipe(sourcemaps.write('./'))
        .pipe(gulp.dest('./dist/js/'));
});

angular.factory('todoStorage', function ($http, ) { ...

a.factory('todoStorage', function (h, ) { ...

angular.factory('todoStorage', ['$http', function ($http, ) { ... } ]

var ngAnnotate = require('browserify-ngannotate');

gulp.task('sprite', function () {

    var spriteData = gulp.src('./images/*.png')
        .pipe(spritesmith({
            imgName: 'todo-sprite.png',
            cssName: '_todo-sprite.scss',
            algorithm: 'top-down',
            padding: 5
        }));

    spriteData.css.pipe(gulp.dest('./dist'));
    spriteData.img.pipe(gulp.dest('./dist'))
});

@include sprites($spritesheet-sprites);

<span class="cal-right-button"></span>

.pipe(cachebust.resources())

gulp.task('build', [ 'clean', 'bower','build-css','build-template-cache', 'jshint', 'build-js'], function() {  
    return gulp.src('index.html')
        .pipe(cachebust.references())
        .pipe(gulp.dest('dist'));
});

gulp.task('test', ['build-js'], function() {  
    var testFiles = [
        './test/unit/*.js'
    ];

    return gulp.src(testFiles)
        .pipe(karma({
            configFile: 'karma.conf.js',
            action: 'run'
        }))
        .on('error', function(err) {
            console.log('karma tests failed: ' + err);
            throw err;
        });
});

gulp test 

gulp.task('jshint', function() {  
    gulp.src('/js/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'));
});

gulp.task('webserver', ['watch','build'], function() { 
    gulp.src('.')
        .pipe(webserver({
            livereload: false,
            directoryListing: true,
            open: "<a href="http://localhost:8000/dist/index.html">http://localhost:8000/dist/index.html</a>"
        }));
});