如何将 gulpfile.js 文件内容迁移到 webpack-mix.js 文件答案

【问题标题】：How to migrate gulpfile.js file content to webpack-mix.js file如何将 gulpfile.js 文件内容迁移到 webpack-mix.js 文件
【发布时间】：2019-05-25 09:58:31
【问题描述】：

我在网上购买了一个主题并获得了一个 gulpfile，而我正在使用 webpack-mix 文件。我尝试了几件事，但无法解决。

谁能告诉我在哪里看或如何解决。

谢谢！

Gulpfile.js

// Define variables
var layout = 'layout_1',        // 'layout_1', 'layout_2', 'layout_3', 'layout_4', 'layout_5'
    theme = 'default',          // 'default' or 'material'
    direction = 'LTR',          // 'LTR' or 'RTL'
    type = 'full',              // 'full' or 'seed'
    iconset = 'icomoon';        // 'icomoon' (default), 'fontawesome', 'material'

// Define plugins
var gulp = require('gulp'),
    postcss = require('gulp-postcss'),
    jshint = require('gulp-jshint'),
    sass = require('gulp-sass'),
    minifyCss = require('gulp-clean-css'),
    concat = require('gulp-concat'),
    uglify = require('gulp-uglify'),
    rename = require('gulp-rename'),
    rtlcss = require('gulp-rtlcss');


// Lint
gulp.task('lint', function() {
    return gulp
        .src(layout + '/' + direction + '/' + theme + '/' + type + '/assets/js/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'));
});


//
// SCSS compilation
//

    gulp.task('sass', function() {
        return gulp
            .src('global_assets/scss/layouts/' + layout + '/' + theme + '/compile/*.scss')
            .pipe(sass())
            .pipe(postcss(processors))
            .pipe(gulp.dest(layout + '/' + direction + '/' + theme + '/' + type + '/assets/css'))
            .pipe(minifyCss({
                level: {1: {specialComments: 0}}
            }))
            .pipe(rename({
                suffix: ".min"
            }))
            .pipe(gulp.dest(layout + '/' + direction + '/' + theme + '/' + type + '/assets/css'));
    });

// Listen for changes in all SCSS files and automatically re-compile
gulp.task('watch', function() {
    gulp.watch('global_assets/scss/**/*.scss', ['sass']);
});

webpack.mix.js

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css');

我只需要迁移基本功能。

有人可以帮我把这个 gulpfile 迁移到 webpack.mix.js 文件吗？

【问题讨论】：

标签： laravel webpack gulp

【解决方案1】：

我的解决方案

const mix = require('laravel-mix'),
   postcss = require('postcss-custom-properties');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

var layout = 'admin',
   theme = 'material',
   iconset = 'icomoon';

mix.react('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/scss/front.scss', 'public/css/front.css')

mix.sass('resources/assets/scss/admin.scss', 'public/css/admin.css')
   .options({
   autoprefixer: {
      options: {
         browsers: [
            '>= 1%',
            'last 1 major version',
            'Chrome >= 45',
            'Firefox >= 38',
            'Edge >= 12',
            'Explorer >= 10',
            'iOS >= 9',
            'Safari >= 9',
            'Android >= 4.4',
            'Opera >= 30'
         ],
         map: false
      }
   },
   postCss: [postcss],
   purifyCss: true
});

mix.sass('resources/assets/scss/shared/icons/' + iconset + '/compile/styles.scss', 'public/css/' + layout + '/icons/' + iconset)

mix.disableNotifications();

【讨论】：