Ответы пользователя по тегу Gulp.js
  • Стоит ли переписать gulp на webpack?

    serii81
    @serii81 Автор вопроса
    Я люблю phр...
    Вот что у меня получилось

    const path = require('path');
    const miniCss = require('mini-css-extract-plugin');
    const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
    const url = "http://bsbase.local/";
    
    module.exports = {
        mode: 'development',
        // mode: 'production',
        entry: './assets/src/js/main.js',
        output: {
            path: path.resolve(__dirname, 'assets/js'),
            filename: 'webpack.js'
        },
        devtool: 'source-map',
        module: {
            rules: [
                {
                    test: /\.(scss|css)$/,
                    use: [
                        miniCss.loader,
                        {
                            loader: 'css-loader',
                            options: {
                                url: false,
                                sourceMap: true
                            },
                        },
                        {
                            loader: "sass-loader",
                            options: {
                                sourceMap: true,
                            },
                        },
                    ],
                },
                {
                    test: /\.js$/,
                    exclude: /node_modules/,
                    loader: 'babel-loader',
                }
            ],
        },
        plugins: [
            new miniCss({
                filename: '../css/my.css',
            }),
            new BrowserSyncPlugin(
                // BrowserSync options
                {
                    // browse to http://localhost:3000/ during development
                    host: 'localhost',
                    port: 3000,
                    // proxy the Webpack Dev Server endpoint
                    // (which should be serving on http://localhost:3100/)
                    // through BrowserSync
                    proxy: url,
                    open: false,
                    notify: true,
                    reloadDelay: 500,
                    injectChanges: true,
                    files: [
                        {
                            match: [
                                '**/*.php',
                                '**/*.js',
                                '**/*.css',
                            ],
                            fn: function (event, file) {
                                if (event === "change") {
                                    const bs = require('browser-sync').get('bs-webpack-plugin');
                                    bs.reload();
                                }
                            }
                        }
                    ]
                },
                // plugin options
                {
                    // prevent BrowserSync from reloading the page
                    // and let Webpack Dev Server take care of this
                    reload: false
                }
            )
        ]
    };
    Ответ написан
    Комментировать
  • Почему не работает sourcemap?

    serii81
    @serii81 Автор вопроса
    Я люблю phр...
    Решил проблему.
    Оказывается что браузер хром показывает кэшированную версию.
    Если в инкогнито посмотреть, то все норм.
    Ответ написан
    Комментировать
  • Как настроить browsersync для wordpress?

    serii81
    @serii81 Автор вопроса
    Я люблю phр...
    Сделал я для себя такой шаблон.
    Создал папку gulp, она находится на одном уровне со всеми проектами.
    Захожу в ней и запускаю команду gulp.
    И теперь, при изменении файлов php, scss, css, js, браузер с задержкой в 2000ms перезагружается.
    Задержка нужна, так как я работаю в шторме и нужно запулить изменения на сервер.
    Вот содержимое gulpfile.js
    'use strict';
    
    let gulp = require('gulp'),
    	//css
    	// stylus = require('gulp-stylus'),
    	sass = require('gulp-sass'),
    	autoprefixer = require("gulp-autoprefixer"),
    	sourcemaps = require('gulp-sourcemaps'),
    	wait = require('gulp-wait'),
    	notify = require("gulp-notify"),
    	plumber = require("gulp-plumber"),
    	browserSync = require('browser-sync').create(),
    	replace = require('gulp-replace');
    
    let siteUrl = 'http://wc-estore.host1670806.hostland.pro/';
    let siteDir = '../wc-estore/';
    
    gulp.task("scss", function () {
    	return gulp.src(siteDir + 'assets/scss/my.scss')
    		// .pipe(plumber())
    		.pipe(sourcemaps.init())
    		.pipe(wait(500))
    		.pipe(sass({
    			outputStyle: 'expanded'
    		}).on('error', notify.onError(function (error) {
    			return 'An error occurred while compiling sass.\nLook in the console for details.\n' + error;
    		})))
    		.pipe(autoprefixer({
    			cascade: false
    		}))
    		.pipe(sourcemaps.write('.'))
    		.pipe(gulp.dest(siteDir + 'assets/css/'))
    		.pipe(browserSync.reload({stream: true}))
    		.pipe(notify("Change css"));
    });
    
    gulp.task("watch", function () {
    	gulp.watch(siteDir + 'assets/scss/**/*.scss', gulp.series('scss'));
    });
    
    gulp.task('browser-sync', function () {
    	browserSync.init({
    		proxy: {
    			target: siteUrl,
    			ws: true
    		},
    		reloadDelay: 2000
    	});
    	gulp.watch(siteDir + "**/*.php").on('change', browserSync.reload);
    	gulp.watch(siteDir + "**/*.css").on('change', browserSync.reload);
    	gulp.watch(siteDir + "**/*.js").on('change', browserSync.reload);
    });
    
    gulp.task('default', gulp.parallel('watch', 'browser-sync'));
    Ответ написан
    Комментировать
  • Как заставить gulp-svgmin не удалять классы из svg?

    serii81
    @serii81 Автор вопроса
    Я люблю phр...
    Решил проблему следующим образом.
    На начальном этапе в папке src для иконок, которых нужно добавить в спрайт удаляю атрибут style вместе с содержимым.
    Ответ написан
  • Почему не удаляются стили при генерации свг-спрайта?

    serii81
    @serii81
    Я люблю phр...
    Я нашел ответ к вашему вопросу.
    Нужно установить дополнительный плагин https://github.com/Hiswe/gulp-cheerio-clean-svg

    И заменить pipe из вашего файла на тот, который в документации.
    У меня сработало.
    Ответ написан
    Комментировать
  • Почему не работает спрайт scss?

    serii81
    @serii81 Автор вопроса
    Я люблю phр...
    Все очень просто, оказывается нельзя начинать переменную с цифрой.
    Надеюсь это кому-нибудь поможет.
    Ответ написан
    Комментировать
  • Почему browser-sync при старте открывает браузер с пустым адресом?

    serii81
    @serii81 Автор вопроса
    Я люблю phр...
    Короче разобрался я с этим багом, вся проблема была в браузере. Удалил хром и установил chromium, теперь заработало. Видимо я в настройках поковырялся и что-то поменял. А вот что именно, так и не нашел.
    Ответ написан
    Комментировать
  • Как с помощью gulp сконвертировать из ttf в woff, woff2, eot и svg?

    serii81
    @serii81 Автор вопроса
    Я люблю phр...
    Заработало, урааааааааааааа!!!
    Вот решение
    var fontfacegen = require('fontfacegen');
    var map = require('map-stream');
    
    gulp.task('fontgen', function() {
      return gulp.src("./assets/*.{ttf,otf}")
        .pipe(map(function(file, cb) {
          fontfacegen({
            source: file.path,
            dest: './dest/'
          });
          cb(null, file);
        }));
    });
    Ответ написан
    Комментировать
  • Как заставить gulp не кэшировать файлы?

    serii81
    @serii81 Автор вопроса
    Я люблю phр...
    Нашел промежуточный ответ на свой вопрос. Хотя, конечно, можно использовать дополнительные плагины галпа, но это уж слишком заморочено все. Мой ответ состоит в следующем:
    1. Запускает инструмент разработчика
    2. В правой части окна, нажимаем на три вертикальные точки.
    3. Выбираем Settings или нажимаем f1
    4. Ставим галочку в блоке Network > Disable cache (while DevTools is open)

    Все, теперь кэш в браузере не будет сохранятся, но при условии, что консоль будет открыта.
    Кстати, здесь же можно изменить тему консоли на темную и это очень круто!!!!
    Ответ написан
    Комментировать
  • TypeError: Cannot read property 'match' of undefined?

    serii81
    @serii81 Автор вопроса
    Я люблю phр...
    Нашел ответ, нужно вместо server прописать proxy.
    Ответ написан
    Комментировать