Использование сборщика проектов gulp

Установка Node.js

Скачиваем с официального сайта последнюю версию Node.js и устанавливаем его.

Установка gulp

Gulp устанавливаем с помощью встроенного в node.js менеджера пакетов npm:

$ npm install gulp-cli -g
$ npm install gulp -D
$ touch gulpfile.js

Настройка gulpfile.js

var gulp = require('gulp');
var minifyCSS = require('gulp-csso'); // минификация css
var autoprefixer = require('gulp-autoprefixer'); // добавление vendor-префиксов
var concat = require( 'gulp-concat' ); // объединение файлов в один
var uglify = require('gulp-uglify'); // минификация js

gulp.task('css', function(){
    return gulp.src('src/css/*.css')
        .pipe(concat('style.min.css'))
        .pipe(autoprefixer({
            browsers: ['last 50 versions']
        }))
        .pipe(minifyCSS())
        .pipe(gulp.dest('css/'))
});

gulp.task('minify-js', function() {
    gulp.src(['src/js/*.js'])
        .pipe(concat('script.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest('js/'))
});

gulp.task('default', [ 'js', 'css' ]);

Использование package.json

Инициализируем создание файла package.json с помощью команды:

$ npm init

В интерактивном режиме заполняем все необходимые поля нашего проекта или пропускаем их. После того, как файл package.json создастся, запишем в блок dependencies все необходимые зависимости. В итоге для нашего проекта получим такой файл:

{
   "name": "test",
   "version": "1.0.0",
   "description": "",
   "main": "gulpfile.js",
   "dependencies": {
      "gulp": "^3.9.1",
      "gulp-autoprefixer": "^4.0.0",
      "gulp-concat": "^2.6.1",
      "gulp-csso": "^3.0.0",
      "gulp-uglify": "^3.0.0"
   },
   "devDependencies": {},
   "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
   },
   "author": "Me",
   "license": "ISC"
}