Сборка нового проекта и компиляция scss и js файлов c помощью gulp

gulpfile.js for step0

// Статья про gulp: goo.gl/EpHx9N

// Для сборки нового проекта необходимо изменить значения переменных:
//      src - путь к файлам проекта, на основе которых будет создаваться новый проект,
//      dist - путь к новому каталогу (создается автоматически).
// После изменения переменных необходимо запустить задачу "gulp newProject" - происходит копирование необходимых
// для проекта файлов и открытие файлов необходимых для работы с проектом.

// Если необходимо проводить работу над существующим проектом, необходимо изменить значение переменной
// dist (путь к файлам нужного проекта) и использовать дефолтную задачу "gulp".
// Переменная src в этом случае задействована не будет.

// Для сжатия изображений их необходимо складывать во временную папку imgmin (png/jpeg/jpg/gif/svg/ico)
// - задача автоматизирована (не добавлять более 20 файлов за один раз, пожалейте DEV)
// Для генерации спрайтов изображения необходимо складывать во временную папку sprite (png/jpg/jpeg/svg)
// - задача автоматизирована (не добавлять более 20 файлов за один раз, пожалейте DEV)

// При запуске проекта в variablesStyleSheet добавляется переменная $isProduction: 'false', при изменении
// значения на 'true' из проекта удаляются временные папки, переменная возвращается к виду: $isProduction: 'false',
// gulp задача останавливается

///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// CONTENT MAP
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//
// #Variables
// #Plugins
// #CreateProject
// #JS
// #Sass
// #ImportSass
// #PNGSprites
// #SVGSprites
// #Imgmin
// #Watchers
// #Production
// #NewProject
// #DelProject
// #DefaultTask
//
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////

// ======================================= #Variables ====================================
var path = {
  src: 'movies/ce',
  dist: 'movies/lb',

  media: '../app-media-network/',
  foundation: '../vendor/jomedia/frontcore/foundation/scss/',

  imgFolder: "<?=$image_url?>"
},

mainStyleSheet = '_style.scss',
variablesStyleSheet = mainStyleSheet,

tmp_folders = {
  sprite: 'sprite',
  imgmin: 'imgmin'
},

tmp_file = '_.ini';

extName = {
  scss: '*.scss',
  svg: '*.svg'
},

importSass = {
  // mainPoint: '// new imports here',
  mainPoint: '@import "variables";',
  reservePoint: '@import "style";',
  queue: [],
  name: '',
  key: '',
  point: '',
  changePoint: true,
  process: false,
  processFalse: function(){
    this.process = false;
  }
},

distPath = {
  step0: path.media + 'views/signup/' + path.dist,
  layouts: path.media + 'views/layouts/signup/' + path.dist,
  scss: 'scss/signup/' + path.dist,
  css: 'css/signup/' + path.dist,
  js: 'js/signup/' + path.dist,
  imgs: 'images/signup/' + path.dist,
  notIncludeImg: '!images/signup/' + path.dist,
  notIncludeScss: '!scss/signup/' + path.dist
},

imgminPath = distPath.imgs + '/' + tmp_folders.imgmin + '/*.*',

isProduction = {
  name: '$isProduction: ',
  true: '"true";',
  false: '"false";'
},

processTimeout = 5000,

spritePng = {
  name: 'png-sprite',
  cssExtname: '.css',
  imgExtname: '.png',
  importCss: '@import ' + '"' + this.name  + '";',
  path: distPath.imgs + '/' + tmp_folders.sprite + '/*.*'
},

spriteSvg = {
  name: 'svg-sprite',
  cssExtname: '.scss',
  imgExtname: '.svg',
  importCss: '@import ' + '"' + this.name  + '";',
  path: distPath.imgs + '/' + tmp_folders.sprite + '/' + extName.svg
},

spriteSvgFullName = spriteSvg.name + spriteSvg.imgExtname,
spriteSvgCssFileName = '_' + spriteSvg.name + spriteSvg.cssExtname,
spritePngFullName = spritePng.name + spritePng.imgExtname,
spritePngCssFileName = '_' + spritePng.name + spritePng.cssExtname,

imgmin = {
  queue: [],
  name: '',
  process: false,
  processFalse: function(){
    this.process = false;
  }
},

// ======================================= #Plugins ====================================
//Необходимые плагины
gulp            = require('gulp'), // Gulp
del             = require('del'), // для удаления файлов и папок
cssnano         = require('gulp-cssnano'), // для минификации CSS
csscomb         = require('gulp-csscomb'), // для комбинирования стилей
concat          = require('gulp-concat'), // для конкатенации файлов
rename          = require('gulp-rename'), // для переименования файлов
uglify          = require('gulp-uglify'), // для сжатия JS файлов
autoprefixer    = require('gulp-autoprefixer'), // для автоматического добавления префиксов
open            = require('gulp-open'), // для открытия файлов
replace         = require('gulp-replace'), // для замены строк
notify          = require('gulp-notify'), // для оповещений и перехвата ошибок
image           = require('gulp-image'), // для оптимизации изображений
uncss           = require('gulp-uncss'), // для удаления неиспользуемых классов
sass            = require('gulp-sass'), // для компиляции Sass в CSS
runSequence     = require('run-sequence'), // для последовательного запуска задач
merge           = require('merge-stream'), // для соединения потоков
file            = require('gulp-file'), // для генерации файлов
svgSprite       = require("gulp-svg-sprites"), // для генерации svg-спрайтов в папке sprite
pngSprite       = require('gulp.spritesmith'), // для генерации спрайтов в папке sprite
contains        = require('gulp-contains'), // для проверки на наличие
insert          = require('gulp-insert'), // для вставки текста в файл
gulpif          = require('gulp-if'), // для проверки на условие
shrthnd         = require('shrthnd'), // для использования сокращений в css
fs              = require('fs'); // file-system

// ======================================= #CreateProject ====================================
// #create
// Создание каталогов и копирование файлов в новый проект
gulp.task('create', ['create:ini'], function () {
  var allIn = '/**/*.*';
  return gulp.src([
    'scss/signup/' + path.src + allIn,
    'css/signup/' + path.src + allIn,
    'js/signup/' + path.src + allIn,
    'images/signup/' + path.src + allIn,
    path.media + 'views/signup/' + path.src + allIn,
    path.media + 'views/layouts/signup/' + path.src + allIn
    ])
  .pipe(gulpif(function(f){
    return f.path.indexOf('header.tpl') >= 0 || f.path.indexOf('main.php') >= 0;
    }, replace(path.src, path.dist)))
  .pipe(gulp.dest(function(f){
    return (f.path.indexOf('\\views\\signup\\') >= 0) ? distPath.step0 + '/' :
    (f.path.indexOf('\\views\\layouts\\signup\\') >= 0) ? distPath.layouts + '/' :
    (f.path.indexOf('\\scss\\signup\\') >= 0) ? distPath.scss + '/' :
    (f.path.indexOf('\\js\\signup\\') >= 0) ? distPath.js + '/' :
    (f.path.indexOf('\\images\\signup\\') >= 0) ? distPath.imgs + '/' :
    (f.path.indexOf('\\css\\signup\\') >= 0) ? distPath.css + '/' :
    null;
  })).pipe(gulpif(function(f){
    return f.path.indexOf('header.tpl') >= 0 ||
    f.path.indexOf('step0.tpl') >= 0 ||
    f.path.indexOf('scripts.js') >= 0 ||
    f.path.indexOf(mainStyleSheet) >= 0;
  }, open()));
});

// #create:ini
// генерация .ini файлов во временных папках
gulp.task('create:ini', function(){
  var str = '';
  file(tmp_file, str)
  .pipe(gulp.dest(distPath.imgs + '/' + tmp_folders.sprite + '/'))
  .pipe(gulp.dest(distPath.imgs + '/' + tmp_folders.imgmin + '/'));
});

// #open
// Открытие необходимых файлов в редакторе
gulp.task('open', function(){
  return gulp.src([
    path.media + 'controllers/signup_controller.php',
    path.media + 'managers/word_translator_manager.php',
    ])
  .pipe(open());
});

// #productionVarInStyle
// Создание переменной $isProduction в variablesStyleSheet
gulp.task('productionVarInStyle', function() {
  return gulp.src(distPath.scss + '/' + variablesStyleSheet)
  .pipe(contains(isProduction.name).on( 'error', notify.onError({title : 'Var $isProduction exists'})))
  .pipe(insert.prepend(isProduction.name + isProduction.false + '\n'))
  .pipe(gulp.dest(distPath.scss + '/'));
});

// =======================================#JS====================================
gulp.task('js', function() {
  return gulp.src(distPath.js + '/scripts.js')
  .pipe(uglify().on( 'error', notify.onError({title  : "JS Error!"})))
  .pipe(rename({suffix: '.min'}))
  .pipe(gulp.dest(distPath.js + '/'));
});

// ======================================#Sass====================================
// #sass:check
gulp.task('sass:check', function() {
  return runSequence('check', 'sass'); // включить сюда clean-sass
});

// #check
//Проверка на наличие переменной $isProduction
gulp.task('check', function() {
  return gulp.src(distPath.scss + '/' + mainStyleSheet)
  .pipe(contains({
    search: isProduction.name + isProduction.true,
    onFound: function(){
      return runSequence('sass', 'production'); // включить сюда clean-sass
    }
  }));
});

// #sass
gulp.task('sass', function(){
  return gulp.src(distPath.scss + '/' + extName.scss)
  .pipe(sass({includePaths: [path.foundation]}).on( 'error', notify.onError({title : "Sass Error!"})))
  .pipe(concat('app.css'))
  .pipe(autoprefixer(['last 30 versions', '> 1%', 'ie 8', 'ie 7'], { cascade: true }))
  .pipe(csscomb())
  .pipe(cssnano())
  .on('data', function(f){
    return file('app.css', shrthnd(new Buffer(f.contents).toString()).string)
    .pipe(cssnano())
    .pipe(gulp.dest(distPath.css + '/'))
    .pipe(notify({title : "Sass success!"}));
  });
  // .pipe(gulp.dest(distPath.css + '/'));
});

// =======================================#ImportSass====================================
// #sort:import
// добавление @import в app.scss при добавлении новых .scss файлов место добавления - importSass.point
gulp.task('sort:import', function() {
  if(importSass.key == 'added' || importSass.key == 'renamed'){
    importSass.point = importSass.mainPoint;
    runSequence('check:point', 'add:import',
      function(){
        importSass.point = importSass.mainPoint;
        importSass.changePoint = true;
        return;
      });
  } else {
    return gulp.src(distPath.scss + '/app.scss')
    .pipe(replace('\n' + importSass.name, ''))
    .pipe(gulp.dest(distPath.scss + '/'))
    .pipe(notify({title : "@import removed!"}));
  }
});

gulp.task('check:point', function() {
  return gulp.src(distPath.scss + '/app.scss')
  .pipe(contains(importSass.name).on( 'error', notify.onError({title : "@import already exist"})))
  .pipe(contains({
    search: importSass.point,
    onFound: function(){
      importSass.changePoint = false;
      gulp.start('add:import');
      return false;
    }
  }));
});

gulp.task('add:import', function() {
  if(importSass.changePoint) {importSass.point = importSass.reservePoint;}
  return gulp.src(distPath.scss + '/app.scss')
  .pipe(replace(importSass.point, importSass.name + '\n' + importSass.point))
  .pipe(gulp.dest(distPath.scss + '/'))
  .pipe(notify({title : "@import added!"}));
});

// =======================================#PNGSprites=================================================
gulp.task('sprite:png', function() {
  var spriteData = gulp.src([
    spritePng.path,
    distPath.notIncludeImg + '/' + tmp_folders.sprite + '/' + extName.svg,
    distPath.notIncludeImg + '/' + tmp_folders.sprite + '/' + tmp_file
    ])
  .pipe(pngSprite({
    imgName: spritePngFullName,
    cssName: spritePngCssFileName,
    padding: 10,
    imgPath: '"' + path.imgFolder + spritePngFullName + '"',
    cssVarMap: function (sprite) {
      sprite.name = sprite.name + '.icon';
    }
  }).on( 'error', notify.onError({title  : "PNG Sprite Error!"})));

  var imgStream = spriteData.img
  .pipe(gulp.dest(distPath.imgs + '/'));

  var cssStream = spriteData.css
  .pipe(replace('%22', '"'))
  .pipe(rename(function (path){
    path.extname = spriteSvg.cssExtname; // приходится переименовывать из .css в .scss, т.к. файл генерится в scss некорректно
  }))
  .pipe(gulp.dest(distPath.scss + '/'));

  return merge(imgStream, cssStream);
});

// =======================================#SVGSprites=================================================
gulp.task('sprite:svg', function () {
  return gulp.src(spriteSvg.path)
  .pipe(svgSprite({
    preview: false,
    cssFile: distPath.scss + '/' + spriteSvgCssFileName,
    svg: {
      sprite: distPath.imgs + '/' + spriteSvgFullName
    },
    // preview: {
    //   sprite: distPath.imgs + '/' + "sprite.html"
    // },
    padding: 10,
    svgPath: path.imgFolder + spriteSvgFullName,
    pngPath: path.imgFolder + spriteSvgFullName,
    selector: "icon-%f"
  }))
  .pipe(gulp.dest(''));
});

// =======================================#Imgmin=================================================
gulp.task('imgmin:min', function () {
  imgmin.name = imgmin.queue.shift();
  return gulp.src(imgmin.name)
  .pipe(image())
  .pipe(gulp.dest(distPath.imgs + '/'));
});

gulp.task('imgmin:del', ['imgmin:min'], function() {
  del(imgmin.name);
});

// =======================================#Watchers=================================================
// #watchImports
setTimeout(function watcher() {
  if(imgmin.queue.length > 0 && !imgmin.process){
    imgmin.process = true;
    runSequence('imgmin:del', function(){
      imgmin.processFalse();
    });
  }
  if(importSass.queue.length > 0 && !importSass.process){
    importSass.process = true;
    var importItem = importSass.queue.shift();
    importSass.key = importItem[0];
    importSass.name = importItem[1];
    runSequence('sort:import', function(){
      setTimeout(function(){
        return importSass.processFalse();
      }, processTimeout);
    });
  }
  setTimeout(watcher, 0);
}, 0);

// #sprite:watch
gulp.task('sprite:watch', function () {
  return gulp.watch(spritePng.path, function(event) {
    // console.log('img ' + event.type);
    if(event.path.indexOf(tmp_file) > 0 && event.type == 'deleted') {
      gulp.start('create:ini');
    }
    if(event.path.indexOf(tmp_file) < 0) {
      if(event.path.lastIndexOf('.svg') >= 0) {
        gulp.start('sprite:svg');
      } else {
        gulp.start('sprite:png');
      }
    }
  });
});

// #imgmin:watch
gulp.task('imgmin:watch', function () {
  return gulp.watch(imgminPath, function(event) {
    if(event.path.indexOf(tmp_file) < 0 && event.type == 'added') {
      imgmin.queue.push(event.path);
    }
    if(event.path.indexOf(tmp_file) > 0 && event.type == 'deleted') {
      gulp.start('create:ini');
    }
  });
});

// #sass:import:watch
gulp.task('sass:import:watch', function () {
  return gulp.watch(distPath.scss + '/' + extName.scss, function(event) {
    var start = event.path.lastIndexOf('\\') + 1,
    finish = event.path.lastIndexOf('.'),
    filename = event.path.substring(start, finish);
    if(filename.indexOf('_') === 0 && filename.length > 1){
      filename = filename.substring(1);
    }
    var importName = '@import "' + filename + '";';
    // console.log(filename + ' ' + event.type);
    if(event.type == 'added' || event.type == 'renamed' || event.type == 'deleted'){
      importSass.queue.push([event.type, importName]);
    }
  });
});

// #watch
gulp.task('watch', function() {
  gulp.start('productionVarInStyle');
  gulp.watch([distPath.scss + '/' + extName.scss, distPath.notIncludeScss + '/' + mainStyleSheet], ['sass']);
  gulp.watch(distPath.scss + '/' + mainStyleSheet, ['sass:check']);
  gulp.watch(distPath.js + '/scripts.js', ['js']);
});

// #watchers
gulp.task('watchers', ['watch', 'sprite:watch', 'imgmin:watch', 'sass:import:watch']);

// =======================================#Production=========================================
// информирует о неиспользуемых изображениях
// gulp.task('__un-img__', function () { // задача находится в разработке, не используется
//   return gulp.src([
//     distPath.imgs + '/**/*',
//     distPath.css + '/app.css',
//     distPath.step0 + '/step0.tpl', // не видит изображения здесь
//     distPath.layouts + '/header.tpl'
//     ])
//   .pipe(unusedImages({log: true}).on( 'error', notify.onError({title : "Unused images!!!"})))
// });

// Задача удаления неиспользуемых классов из mainStyleSheet
gulp.task('clean-sass', function(){
  return gulp.src(distPath.scss + '/' + mainStyleSheet)
  .pipe(uncss({
    html: [distPath.step0 + '/step0.tpl']
  }))
  .pipe(gulp.dest(distPath.scss + '/'))
  .pipe(notify({title : "UN-Sass success!"}));
});

// #del:prodVar
// Возврат переменной $isProduction в состояние false
gulp.task('del:prodVar', function() {
  return gulp.src(distPath.scss + '/' + variablesStyleSheet)
  .pipe(replace(isProduction.name + isProduction.true, isProduction.name + isProduction.false))
  .pipe(gulp.dest(distPath.scss + '/'));
});

// #del:tmp
// Задача удаления временных папок imgmin и sprite
gulp.task('del:tmp', function() {
  return del([distPath.imgs + '/' + tmp_folders.sprite, distPath.imgs + '/' + tmp_folders.imgmin]);
});

// #stop
gulp.task('stop', function() {
  return process.exit();
});

// #production
gulp.task('production', function() {
  return runSequence('del:prodVar', 'del:tmp',
    function(){
      setTimeout(function(){
        gulp.start('stop');
      }, processTimeout);
    });
});

// =======================================#NewProject=========================================
gulp.task('newProject', function() {
  runSequence('create', 'open', 'watchers');
});

// =======================================#DelProject=========================================
gulp.task('kill:node', function() {
  return del('node_modules');
});

gulp.task('kill:start', function() {
  return del([
    distPath.step0,
    distPath.layouts,
    distPath.scss,
    distPath.css,
    distPath.js,
    distPath.imgs
    ], {force: true});
});

gulp.task('kill', function() {
  return runSequence('kill:start', 'stop');
});

// =======================================#DefaultTask============================================
gulp.task('default', function() {
  runSequence('create:ini',
    function(){
      setTimeout(function(){
        gulp.start('watchers');
      }, processTimeout);
    });
});

// ===============================================================================================

package.json

{
  "name": "newproject",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Author",
  "license": "ISC",
  "dependencies": {
    "del": "^2.2.0",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^3.1.0",
    "gulp-concat": "^2.6.0",
    "gulp-contains": "^1.1.0",
    "gulp-csscomb": "^3.0.8",
    "gulp-cssnano": "^2.1.2",
    "gulp-file": "^0.3.0",
    "gulp-if": "^2.0.2",
    "gulp-image": "^2.7.0",
    "gulp-insert": "^0.5.0",
    "gulp-notify": "^2.2.0",
    "gulp-open": "^2.0.0",
    "gulp-rename": "^1.2.2",
    "gulp-replace": "^0.5.4",
    "gulp-sass": "^2.2.0",
    "gulp-svg-sprites": "^4.1.1",
    "gulp-uglify": "^2.0.0",
    "gulp-uncss": "^1.0.6",
    "gulp.spritesmith": "^6.4.0",
    "merge-stream": "^1.0.1",
    "run-sequence": "^1.2.2",
    "shrthnd": "0.0.6"
  }
}