Laravel缩小CSS和JS文件

Question

我通过HTML表单以字符串形式接收自定义js和css脚本。然后将此字符串保存在文件系统上的文件中。问题是如何在每次生成/更新文件时将其最小化。我正在用gulp和laravel不老长寿药。我的第一个想法是调用exec（“ gulp something”），但不确定如何配置gulp。

Answer 1

要求：

• gulp-newer
• minifyCss
• 吞咽

第一步：（安装插件）

minifyCss和咽-丑化由laravel-酏剂使用。你必须安装一口，新通过npm install gulp-newer --save-dev。

第二步：（定义任务）

您需要为CSS和JS定义不同的任务。

CSS任务

gulp.task('cssTask', function() {
            return gulp.src(cssSrc)
                .pipe(newer(cssDest))//compares the css source and css destination(css files)
                .pipe(minifyCss())//minify css
                .pipe(gulp.dest(cssDest));//save minified css in destination directory 
        });

js任务

gulp.task('jsTask', function() {
            return gulp.src(jsSrc)
                .pipe(newer(jsDest))//compares the js source and js destination(js files)
                .pipe(uglify())//minify js
                .pipe(gulp.dest(jsDest));//save minified js in destination directory 
        });

第三步：（定义自定义表）

您应该有一个监视任务，监视您的源目录（cssSrc和jsSrc）并调用其相关任务。

gulp.task('custom', function() {//Watch task
            gulp.watch(cssSrc, ['cssTask']);//watch your css source and call css task
            gulp.watch(jsSrc, ['jsTask']);//watch your js source and call js task
        });

第四步：（运行自定义表）

最后，您必须通过运行自定义任务gulp custom。

结论：

每次将文件添加到源目录时。Gulp将缩小文件并将其存储在目标目录中。这是在本地测试的，并且效果很好。

完成的Gulp文件

var gulp = require('gulp');
var elixir = require('laravel-elixir');
var newer = require('gulp-newer');
var minifyCss = require('gulp-minify-css');
var uglify = require('gulp-uglify');

cssSrc = 'cssSrc/*.css';//Your css source directory
cssDest = 'cssDest';//Your css destination directory

jsSrc = 'jsSrc/*.js';//Your js source directory
jsDest = 'jsDest';//Your js destination directory


gulp.task('cssTask', function() {
    return gulp.src(cssSrc)
        .pipe(newer(cssDest))//compares the css source and css destination(css files)
        .pipe(minifyCss())//minify css
        .pipe(gulp.dest(cssDest));//save minified css in destination directory 
});

gulp.task('jsTask', function() {
    return gulp.src(jsSrc)
        .pipe(newer(jsDest))//compares the js source and js destination(js files)
        .pipe(uglify())//minify js
        .pipe(gulp.dest(jsDest));//save minified js in destination directory 
});

gulp.task('custom', function() {//Watch task
    gulp.watch(cssSrc, ['cssTask']);//watch your css source and call css task
    gulp.watch(jsSrc, ['jsTask']);//watch your js source and call js task
});

评论后编辑：

我想要这样的东西：gulp自定义srcFile destFile。

对于这种情况，您需要安装一个名为yargs的新插件。

安装：

您可以通过安装yargs npm install yargs --save-dev，然后在调用自定义任务时必须传递源目录和目标目录。

gulp custom  --cssSrc=cssSource --cssDest=cssDestination --jsSrc=jsSource --jsDest=jsDestination

例如：

gulp custom  --cssSrc=cssSrc/*.css --cssDest=cssDest --jsSrc=jsSrc/*.js --jsDest=jsDest

完成的Gulp文件：

var gulp = require('gulp');
var elixir = require('laravel-elixir');
var newer = require('gulp-newer');
var minifyCss = require('gulp-minify-css');
var uglify = require('gulp-uglify');
var argv = require('yargs').argv;

cssSrc = argv.cssSrc;
cssDest = argv.cssDest;

jsSrc = argv.jsSrc;
jsDest = argv.jsDest;



gulp.task('cssTask', function() {
    return gulp.src(cssSrc)
        .pipe(newer(cssDest))
        .pipe(minifyCss())
        .pipe(gulp.dest(cssDest));
});

gulp.task('jsTask', function() {
    return gulp.src(jsSrc)
        .pipe(newer(jsDest))
        .pipe(uglify())
        .pipe(gulp.dest(jsDest));
});

gulp.task('custom', function() {
    gulp.watch(cssSrc, ['cssTask']);
    gulp.watch(jsSrc, ['jsTask']);
});

注意：每次更改源目录或目标目录时，必须再次调用gulp任务。