Laravel по-русски

Gleb2708 +29

Сообщений: 63

Статей: 1

Каково назначение папки resources/assets?

Каково назначение папки assets (resources/assets)?

Я знаю, что в только что собранном проекте там находятся стили и JS-код по умолчанию, который Laravel Mix компилирует в выдаёт в папку public.

Теперь предположим, что я по какой-то причине не хочу использовать Laravel Mix и не хочу держать стили и js в assests - долго до них добираться + интуитивно непонятное назначение папки по её названию. Я подумываю вообще удалить папку assets, а все исходники (HTML-вёрстку, SASS, JS и прочее) хранить в папке frontend, которая находится в корневом каталоге проекта (такое имя папки лучше соответствует её содержимому). Development и prodution-сборку стилей и JS в public с помощью gulp и webpack я могу настроить самостоятельно без использования Laravel-mix.

Будут ли в этом случае какие-либо отрицательные последствия, если я удалю папку assets?

Изменено Gleb2708 (07.10.2017 11:43:05)

AlexeyMezenin +484

Топ 10%

Мастер

Писарь

Сообщений: 783

Статей: 3

Re: Каково назначение папки resources/assets?

Технически нет. Но использование великов - это плохая идея. Используй встроенные инструменты Laravel для каждой задачи, если можешь. Особенно это актуально для коммерческих проектов.

---

Хорошие практики Laravel

Gleb2708 +29

Сообщений: 63

Статей: 1

Re: Каково назначение папки resources/assets?

Оффтоп, но я хочу знать, почему это плохая идея и почему в коммерческих сайтах надо использовать встроенные средства.

Я одно время хотел использовать Laravel Mix, но тут же оказалось, что он совершенно лишён гибкости и крайне плохо кастомизируем. Я приведу ниже свои настройки для gulp и webpack, которые на данный момент использую в Laravel-проектах, но по своей методике, то есть с самостоятельной настройкой нативных gulp и webpack . Вот скажите: с помощью Laravel Mix я могу так же гибко всё настроить?

gulpfule.js

var  gulp = require('gulp'), 
        pug = require('gulp-pug'),
        sass = require('gulp-sass'),
        browserSync  = require('browser-sync'),
        cssnano     = require('gulp-cssnano'), 
        autoprefixer = require('gulp-autoprefixer'),
        rename      = require('gulp-rename'),
        del         = require('del'),
        imagemin    = require('gulp-imagemin'), 
        pngquant    = require('imagemin-pngquant'),
        cache       = require('gulp-cache'),
        runSequence = require('run-sequence'),
        shorthand = require('gulp-shorthand'); 

gulp.task('default', ['watch']);

gulp.task('pug', function() { 
    
    return gulp.src('resources/assets/01_pug/*.pug')
        .pipe(pug({
            pretty: true,
            basedir: 'resources/assets/01_pug'
        }))
        .pipe(gulp.dest('resources/assets'))
        .pipe(browserSync.reload({stream: true}));

});

gulp.task('sass', function(){ 
    
    return gulp.src('resources/assets/02_sass/*.+(sass|scss)') 
        .pipe(sass()) 
        .pipe(autoprefixer(['last 15 versions', '> 1%', 'ie 8', 'ie 7'], { cascade: true })) 
        .pipe(gulp.dest('resources/assets/css'))
        .pipe(browserSync.reload({stream: true})); 

});

gulp.task('browser-sync', function() { 
    
    browserSync({ 
        server: { 
            baseDir: 'resources/assets' 
        },
        notify: false 
    });
    
});

gulp.task('watch', ['browser-sync', 'pug', 'sass'], function() {
    gulp.watch('resources/assets/01_pug/**/*.pug', ['pug']); 
    gulp.watch('resources/assets/02_sass/*.+(sass|scss)', ['sass']);
    gulp.watch('resources/assets/03_es6/*.js', browserSync.reload);
});

// === Production Build

gulp.task('Build production', function(){
    
    runSequence(    'Clean previous production build',
                              'sass', 'Prepare CSS for production',
                              'Copy Fonts Folder To Production',
                              'Prepare images for production'
    );
       
});

gulp.task('Clean previous production build', function() {
    
    return del.sync(['public/css/*.css', 'public/img/**/*']);
    
});

gulp.task('Prepare CSS for production', function(){
    
    return gulp.src('resources/assets/css/*.css')
            .pipe(shorthand())
            .pipe(cssnano())
            .pipe(rename({suffix: '.min'}))
            .pipe(gulp.dest('public/css'));
});

gulp.task('Copy Fonts Folder To Production', function(){
    
    return gulp.src('resources/assets/fonts/**/*')
                    .pipe(gulp.dest('public/fonts'));
            
});

gulp.task('Prepare images for production', function() {
    
    return gulp.src('resources/assets/img/**/*') 
        .pipe(cache(imagemin({ 
            interlaced: true,
            progressive: true,
            svgoPlugins: [{removeViewBox: false}],
            use: [pngquant()]
        })))
        .pipe(gulp.dest('public/img')); 

});

gulp.task('Clear cash', function () {
    return cache.clearAll();
});

webpack.config.js

'use strict';

const NODE_ENV = process.env.NODE_ENV || 'development';
const webpack = require('webpack');

const output_path = NODE_ENV === 'production' ?
    (__dirname + '/public/js'):
    (__dirname + '/resources/assets/js');

module.exports = {
    
    context: __dirname + '/resources/assets/03_es6',
    
    entry: {
        index: './01indexEP.js',
        about: './02aboutEP.js',
        business: './03businessEP.js',
        feedback: './05feedbackEP.js'
    },
    
    output: {
        path: output_path,
        filename: '[name].js'
    },
    
    watch: NODE_ENV === 'development',
    
    watchOptions: {
        aggregateTimeout: 100
    },
    
    devtool: NODE_ENV === 'development' ? 'cheap-inline-module-source-map' : false,
        
    resolve : {
        alias: {
          "jquery-ui": "jquery-ui-dist/jquery-ui.js"
        },
        extensions: ['.js', '.jsx', '.json', '*']
    },
        
    module: {
        rules: [
            {
                test: [
                    /\.jsx?$/
                ],
                exclude: /node_modules/,
                use: [
                    'babel-loader'
                ]
            }            
        ]
    },
    
    plugins: [
        
        new webpack.ProvidePlugin({
            jQuery: "jquery",
            $: "jquery"
        })
         
    ]
 
};

if (NODE_ENV === 'production') {
    module.exports.plugins.push(
            new webpack.optimize.UglifyJsPlugin({
            beautify: NODE_ENV === 'development' ? true : false,
            mangle: {
                screw_ie8: true,
                keep_fnames: true
            },
            compress: {
                screw_ie8: true
            },
            comments: false
        })
    );
}

Изменено Gleb2708 (08.10.2017 04:36:57)