Для получения полного доступа
зарегистрируйтесь.
Сниппет,  JavaScript

Если вы еще не используете gulp, scss, coffescript, localtunnel и browserSync, то вы очень многое теряете, господа!


По правде coffescript я тоже не использую. Но не об этом ))) Статья для новичков и для тех, кто стремится изучить эту тему. Для бывалых скорее всего покажется простыми брызгами слюней от "открытия америки".

Есть такая замечательная штука Gulp. Легко гуглится. В кратце это серверный комбайн расширяемый плагинами. Код который привел ниже запускается в командной строке одной лишь командой # gulp При этом он делает следующее

  1. вначале запуска удаляет все старое нагенеренное ранее
  2. следит за всеми изменениями файлов в папке src/scss и, в случае их изменения, автоматически конверстирует scss > css и складывает в папку build/css. При этом создает map файл, сжимает стили и объединяет все в один файл. добавляет все префиксы для различных браузеров автоматически, и, анализируя все html файлы проекта, удаляет все неиспользуемые стили из build. например на странице авторизации с подключенным бутстрапом стили весили 400кб, стали весить 25кб. думаю прогресс.
  3. собирает все яваскрипты из папки src/js в один файл, минимизирует, сжимает, удаляет все лишнее и складывает в build/js. Помимо этого, благодаря rigger становится доступным синтаксис инклуда файлов
    //= lib/lib.js
    
  4. сжимает, конвертирует, настраивает картинки. в теории можно даже создавать автоматом спрайты, но я до этого не дошел. может так же анализировать размеры изображений, и те, что меньше , например 2-5кб, пихать прямо в css base64
  5. шрифты. у меня просто копируются, ровно как и папка вендоров.
  6. обрабатывает html код. в моем случае используется только rigger для вставки блоков и автообновлении.
  7. Автообновление. как только у нас изменится стиль, яваскрипт, хтмл, или шрифт, все устройства, в которых открыт данный сайт в данный момент автоматически перезагрузятся. да это типа livereload, но по мне удобнее browserSync
  8. localtonnel.me - абалденная вещь! При запуске галпа, система автоматически создает вебсервер и локальный туннель к твоей локальной машине. Вы видете примерно следующее:
     $ gulp
    [14:09:24] Using gulpfile /var/www/sites/*****/layout/gulpfile.js
    [14:09:24] Starting 'html:build'...
    [14:09:24] Finished 'html:build' after 17 ms
    [14:09:24] Starting 'js:build'...
    [14:09:24] Finished 'js:build' after 9.67 ms
    [14:09:24] Starting 'style:build'...
    [14:09:24] Finished 'style:build' after 12 ms
    [14:09:24] Starting 'fonts:build'...
    [14:09:24] Finished 'fonts:build' after 1.98 ms
    [14:09:24] Starting 'image:build'...
    [14:09:24] Finished 'image:build' after 6.75 ms
    [14:09:24] Starting 'vendor:build'...
    [14:09:24] Finished 'vendor:build' after 1.57 ms
    [14:09:24] Starting 'build'...
    [14:09:24] Finished 'build' after 5.81 μs
    [14:09:24] Starting 'webserver'...
    [14:09:24] Finished 'webserver' after 57 ms
    [14:09:24] Starting 'watch'...
    [14:09:24] Finished 'watch' after 23 ms
    [14:09:24] Starting 'default'...
    [14:09:24] Finished 'default' after 6.58 μs
    [14:09:25] gulp-imagemin: Minified 1 image (saved 5.42 kB - 16.6%)
    [Maxyc_Devil] Access URLs:
    

   Local: http://localhost:9000
External: http://192.168.0.106:9000
  Tunnel: https://cctgovuwap.localtunnel.me

      UI: http://localhost:3001

UI External: http://192.168.0.106:3001


[Maxyc_Devil] Serving files from: ./build


Теперь проверка сайта на всех устройствах стала очень удобной, как только я что то изменю на сайте, галп автоматически все моментально пересобирает и на всех устройствах все обновляется. При чем обновляется без перезагрузки страницы. Если на каком либо устройстве вы перейдете по ссылке или откроете меню, оно откроется и перейдет по ссылке на всех других устройствах одновременно. Что дает очень удобный инструмент удаленного тестирования и показа верстки клиенту.

// gulpfile.js 'use strict';

var gulp = require('gulp'),

watch = require('gulp-watch'),
prefixer = require('gulp-autoprefixer'),
uglify = require('gulp-uglify'),
sass = require('gulp-sass'),
sourcemaps = require('gulp-sourcemaps'),
rigger = require('gulp-rigger'),
cssmin = require('gulp-minify-css'),
imagemin = require('gulp-imagemin'),
pngquant = require('imagemin-pngquant'),
rimraf = require('rimraf'),
browserSync = require("browser-sync"),
reload = browserSync.reload;

var path = {

build: {
    html: 'build/',
    js: 'build/js/',
    css: 'build/css/',
    img: 'build/img/',
    fonts: 'build/fonts/',
    vendor: 'build/vendor/'
},
src: {
    html: [
      'src/html/**/*.html',
      'src/html/user/profile/*.html'
    ],
    js: 'src/js/main.js',
    style: ['src/style/*.scss'],
    img: 'src/img/**/*.*',
    fonts: 'src/fonts/**/*.*',
    vendor: 'src/vendor/**'
},
watch: {
    html: 'src/html/**/*.html',
    js: 'src/js/**/*.js',
    style: 'src/style/**/*.scss',
    img: 'src/img/**/*.*',
    fonts: 'src/fonts/**/*.*',
    vendor: 'src/vendor/**/*.*'
},
clean: './build'

};

var config = {

server: {
    baseDir: "./build"
},
tunnel: true,
host: 'localhost',
port: 9000,
logPrefix: "Maxyc_Devil"

};

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

browserSync(config);

});

gulp.task('clean', function (cb) {

rimraf(path.clean, cb);

});

gulp.task('html:build', function () {

gulp.src(path.src.html) 
    .pipe(rigger())
    .pipe(gulp.dest(path.build.html))
    .pipe(reload({stream: true}));

});

gulp.task('js:build', function () {

gulp.src(path.src.js) 
    .pipe(rigger()) 
    .pipe(sourcemaps.init()) 
    .pipe(uglify()) 
    .pipe(sourcemaps.write()) 
    .pipe(gulp.dest(path.build.js))
    .pipe(reload({stream: true}));

});

gulp.task('style:build', function () {

gulp.src(path.src.style) 
    .pipe(sourcemaps.init())
    .pipe(sass({
        includePaths: ['src/style/'],
        outputStyle: 'compressed',
        sourceMap: true,
        errLogToConsole: true
    }))
    .pipe(prefixer())
    .pipe(cssmin())
    .pipe(sourcemaps.write())
    .pipe(gulp.dest(path.build.css))
    .pipe(reload({stream: true}));

});

gulp.task('image:build', function () {

gulp.src(path.src.img) 
    .pipe(imagemin({
        progressive: true,
        svgoPlugins: [{removeViewBox: false}],
        use: [pngquant()],
        interlaced: true
    }))
    .pipe(gulp.dest(path.build.img))
    .pipe(reload({stream: true}));

});

gulp.task('fonts:build', function() {

gulp.src(path.src.fonts)
    .pipe(gulp.dest(path.build.fonts))

});

gulp.task('vendor:build', function() {

//gulp.copy(path.src.vendor, path.build.vendor);
gulp.src(['src/vendor/**/*']).pipe(gulp.dest('build/vendor'));

});

gulp.task('build', [

'html:build',
'js:build',
'style:build',
'fonts:build',
'image:build',
'vendor:build'

]);

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

watch([path.watch.html], function(event, cb) {
    gulp.start('html:build');
});
watch([path.watch.style], function(event, cb) {
    gulp.start('style:build');
});
watch([path.watch.js], function(event, cb) {
    gulp.start('js:build');
});
watch([path.watch.img], function(event, cb) {
    gulp.start('image:build');
});
watch([path.watch.fonts], function(event, cb) {
    gulp.start('fonts:build');
});
watch([path.watch.vendor], function(event, cb) {
    gulp.start('vendor:build');
});

});

gulp.task('default', ['build', 'webserver', 'watch']);


  JavaScript gulp scss browser-sync

Автор


Gravatar image
maxyc
  • Репутация: 29
  • Сниппеты : 4
  • Ревизии : 0
Подписаться

Другие варианты сниппета Отсортировано по рейтингу


  Рейтинг

Чтобы увидеть комментарии, нужно быть участником сообщества

Регистрация