четверг, 23 ноября 2017 г.

Пакеты GRUNT/Gulp о которых хочется помнить

В официальном репозитории GRUNT и на GitHub я к сожалению не нашел описаний плагинов, но нашел хороший сайт Плагины GRUNT на котором все описания плагинов есть!

gulp.spritesmith

Плагин для построения спрайта из изображений директории. GitHub
var gulp = require('gulp');
var spritesmith = require('gulp.spritesmith');
gulp.task('sprite', function () {
  var spriteData = gulp.src('images/*.png').pipe(spritesmith({
    imgName: 'sprite.png',
    cssName: 'sprite.css'
  }));
  return spriteData.pipe(gulp.dest('path/to/output/'));
});

gulp-sourcemaps

Генерация объектных файлов .map для создания ссылок между css и scss
var gulp = require('gulp');
var plugin1 = require('gulp-plugin1');
var plugin2 = require('gulp-plugin2');
var sourcemaps = require('gulp-sourcemaps');
gulp.task('javascript', function() {
  gulp.src('src/**/*.js')
    .pipe(sourcemaps.init())
      .pipe(plugin1())
      .pipe(plugin2())
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('dist'));
});

grunt-contrib-concat

объединение нескольких файлов в один на GitHub
Пример настройки:
concat: {
            // объединение всех нужных css файлов
            dist1: {
                src: [
                    'reset.css',
                    'style.css',
                ],
                dest: 'pruduction.css',
            },
            // объединение всех нужных js файлов     
            dist2: {
                src: [
                    'one.js',
                    'two.js',
                ],
                dest: 'pruduction.js',
            }
        },

grunt-contrib-watch

Плагин, позволяющий следить за изменениями определенного настройками диапазона файлов на GitHub
Пример:
watch: {
            options: {
                livereload: true,
            },
            scripts: {
                files: [
                    'one.js',
                    'two.js'        
                ],
                tasks: ['concat', 'uglify'],
                options: {
                    spawn: false
                }
            },
            css: {
                files: [
                    'one.css',
                    'two.css',
                ],
                tasks: ['concat', 'cssmin'],
                options: {
                    spawn: false
                }
            }
        },

grunt-contrib-cssmin/grunt-contrib-uglify

Плагины, первый сжимает css второй - js на GitHub
Пример:
cssmin: {
            build: {
                src:  'pruduction.css',
                dest: 'pruduction.min.css'
            }
        },
        uglify: {
            build: {
                src: 'pruduction.js',
                dest: 'pruduction.min.js'
        }
     }

grunt-autoprefixer

Автоматическое добавление префиксов для браузеров на GitHub
autoprefixer: {
    options: {
      // Task-specific options go here.
    },
    your_target: {
      // Target-specific file lists and/or options go here.
    },
  },

grunt-contrib-imagemin

Плагин для минификации и оптимизации изображений на GitHub
imagemin: {                            // Task
    static: {                          // Target
      options: {                       // Target options
        optimizationLevel: 3,
        svgoPlugins: [{ removeViewBox: false }],
        use: [mozjpeg()]
      },
      files: {                         // Dictionary of files
        'dist/img.png': 'src/img.png', // 'destination': 'source'
        'dist/img.jpg': 'src/img.jpg',
        'dist/img.gif': 'src/img.gif'
      }
    },
    dynamic: {                         // Another target
      files: [{
        expand: true,                  // Enable dynamic expansion
        cwd: 'src/',                   // Src matches are relative to this path
        src: ['**/*.{png,jpg,gif}'],   // Actual patterns to match
        dest: 'dist/'                  // Destination path prefix
      }]
    }
  }

grunt-contrib-compress

Сжимает файлы проекта в один архив, для последующего развертывания.
compress: {
      main: {
        options: {
          archive: 'project.zip',
          pretty: true
        },
        expand: true,
        cwd: 'assets/',
        src: ['**/*'],
        dest: '/'
      }
    }

grunt-browser-sync

Прекрасный официальный плагин, которые перезагружает браузер при каждом изменении css или js
browserSync: {
      bsFiles: {
        src: 'css/*.css'
      },
      options: {
        server: {
          baseDir: './'
        }
      }
    }

grunt-remove-logging-calls

Плагин, который автоматически удаляет все выводы в консоль console.log('something') , очень полезная возможность для выпуска готовых программ
removelogging: {
    dist: {
      files: [{
        expand: true,
        src: ['*.js'],
        cwd: 'js/',
        dest: 'dist/js/'
      }]
    }
  }

grunt-jsdoc-ng

Генератор автодокументации для кода JavaScript
'jsdoc-ng' : {
      dist : {
        src: ['src/*.js', 'README.md' ],
        dest: 'docs',
        template : 'jsdoc-ng',
        options: {
        }
      }
    }

grunt-concurrent

Плагин, который позволяет запускать задачи параллельно, для ускорения их выполнения
concurrent: {
    target1: ['copy', 'uglify']
}

grunt-contrib-copy

Плагин, позволяющий развернуть приложение из одной папки в другую папку
copy: {
            main: {
                files: [{
                    expand: true,
                    cwd: 'src/',
                    src: ['**'],
                    dest: 'dist/'
                }]
            }
        }
Можно создать заготовленный шаблон для CRUD операция AngularJS и разворачивать его в нужных директориях одной командой.

Комментариев нет:

Отправить комментарий

Рабочий способо убрать хрип микрофона в Ubuntu 18.04

Переходим по ссылке и делаем также как в видео https://www.reddit.com/r/Ubuntu/comments/6zq3ca/remove_background_noise_on_the_mic_in_ubun...