Ответы пользователя по тегу Gulp.js
  • Gulp + webpack-stream. Как создать несколько точек входа с созданием одноимённых файлов на выходе?

    Vextor-ltd
    @Vextor-ltd Автор вопроса
    Webdeveloper
    Разобрался.

    1) Перебирать массив с файлами не нужно. С этим справляется gulp.src(). Надо просто передать туда массив.

    2) Ну и поскольку я прописываю в начале стартер кита все файлы и пути к ним для работы методом gulp.src(), в данном случае Entrypoint-файлы помещаются в массив:
    const path = {
        build: {
            /* ... */
            js: 'assets/build/js/',
            /* ... */
        },
        src: {
            /* ... */
            js: ['assets/src/js/main.js', 'assets/src/js/main-01-test.js']
    /* ... */


    ..то внутри функции для js-таска необходимо просто преобразовать этот массив в объект со свойствами, которые представляют из себя имена этих файлов без разрешений, и добавить это свойство в объект Вебпак конфига.
    Вот эта функция:

    function js_build() {
    
        let webpackConf = {
            mode: `${(devMode === true) ? 'development' : 'production'}`, // current mode for webpack
            output: {
                filename: `[name].js`,  // the same name as the source
                sourceMapFilename: '[name].map'
            },
            module: {
                rules: [
                    {
                        test: /\.(js)$/,    // get all js-files
                        exclude: /(node_modules)/, // exclude development modules folder
                        loader: 'babel-loader', // convert ES6 into a backwards compatible version of JS in older browsers
                        query: {
                            presets: ['@babel/env'] // use babel preset
                        }
                    },
                ]
            },
            optimization: {
                minimize: true,
                minimizer: [new TerserPlugin()],
            },
        };
    
        // convert Gulp array into entry property for Webpack
        let fileName = null;
        let entryObj = {};
        path.src.js.map((filePath) => {
          fileName = filePath.split('/').pop().split('.').slice(0, -1).join('.');
          entryObj[fileName] = filePath;
        });
    
        // add converted entry property to Webpack    
        webpackConf.entry = entryObj;
    
        return gulp.src(path.src.js)
            .pipe(webpackStream(webpackConf)).on('error', function handleError() {
                this.emit('end')
            })
            .pipe(gulp.dest(path.build.js))  // build js
            .pipe(rename({ suffix: '.min' })) // add suffix to the filename
            .pipe(gulp.dest(path.build.js)) // build final min js
            .pipe(browserSync.reload({ stream: true })); // browser-sync reload
    }
    
    exports.js_build = js_build;


    Короче, вот такая вот тема для Галпа с использованием Вебпака для билда js-файлов с несколькими энтрипоинтами. Может кому пригодится :)
    Ответ написан
    Комментировать
  • Как правльно подключить Font Awesome 5 Free, используя Gulp 4 и SCSS?

    Vextor-ltd
    @Vextor-ltd Автор вопроса
    Webdeveloper
    Разобрался. Капец, оказывается в стилях обязательно указывать свойство font-weight
    Его ещё и подбирать нужно. Некоторые иконки работают только при значении равном 700.

    Короче, сильно всё усложнили.
    Ответ написан
    Комментировать
  • Почему при сборке вылезает ошибка "Did you forget to signal async completion"?

    Vextor-ltd
    @Vextor-ltd Автор вопроса
    Webdeveloper
    Забыл добавить.

    Если прописать запуск всех задач вот так:
    exports.build = gulp.series(
        clean_build, 
        gulp.parallel(image_build, fonts_build, js_build, css_build, php_build, html_build)
    );

    то всё работает. А если засунуть это в функцию, то нет. Почему?
    Ответ написан
    Комментировать