Question

当我使用webpack-mix文件时，我在线购买了一个主题并附带了gulpfile。我尝试了一些尝试，但无法解决。

有人可以告诉我在哪里看或如何解决。

谢谢！

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');

我只需要迁移基本功能。

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

Answer 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();

如何将gulpfile.js迁移到webpack-mix.js

1 个答案: