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

Если вы еще не используете 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
    

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

```javascript
// 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']);

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


  Рейтинг

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

Регистрация