M
M
madc0de2020-05-22 00:18:42
webpack
madc0de, 2020-05-22 00:18:42

How to add js compilation modules to Laravel Mix?

I develop websites using gulp

const {src, dest} = require("gulp");
const gulp = require("gulp");
const autoprefixer = require("gulp-autoprefixer");
const cssbeautify = require("gulp-cssbeautify");
const cssnano = require("gulp-cssnano");
const imagemin = require("gulp-imagemin");
const plumber = require("gulp-plumber");
const rename = require("gulp-rename");
const rigger = require("gulp-rigger");
const sass = require("gulp-sass");
const uglify = require('gulp-uglify-es').default;
const concat = require("gulp-concat");
const removecomments = require("gulp-strip-css-comments");

function css() {
    return src(path.src.css, { base: "src/assets/sass/" })
        .pipe(plumber())
        .pipe(sass())
        .pipe(autoprefixer({
            Browserslist: ['> 5% or last 8 versions']
        }))
        .pipe(cssbeautify())
        .pipe(dest(path.build.css))
        .pipe(cssnano({
            discardComments: {
                removeAll: true
            }
        }))
        .pipe(removecomments())
        .pipe(rename({
            suffix: ".min",
            extname: ".css"
        }))
        .pipe(dest(path.build.css))
        .pipe(browsersync.stream());
}

function js() {
    return src(path.src.js, {base: "./src/assets/js/"})
        .pipe(plumber())
        .pipe(rigger())
        .pipe(uglify())
        .pipe(concat('app.js'))
        .pipe(rename({
            suffix: ".min",
            extname: ".js"
        }))
        .pipe(dest(path.build.js))
        .pipe(browsersync.stream());
}


about the same, not counting the processing of pictures.

Now I need to develop a project on laravel and I’ve been sitting for 2 days now and I don’t understand how it is possible to make a similar design there?

Approximately the same documentation. I don’t understand how webpack.mix.js differs from webpack.config.js (if installed via nmp)

At least understand what to do for development so that js is compressed via uglify, es6 can be read with translation via babel. And all the files were glued together and at the output in min.js they got a ready-made build.

At least fresh articles where it is described. Or a ready example.

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question