logo标签列表

Laravel压缩CSS和JS文件

javascriptcssnode.jsgulp
3

我通过HTML表单接收自定义的JS和CSS脚本，并将这些字符串保存在文件系统中。问题是每次生成/更新文件时如何压缩这些文件。我使用gulp和laravel elixir。我的第一个想法是调用exec("gulp something")，但不确定如何配置gulp。

http://laravel.com/docs/5.1/elixir - Limon Monte
你可能没有理解这个问题。我想通过 Laravel 应用程序使用 Gulp 来压缩自定义的 JS 或 CSS 文件。 - izupet
请参考以下答案：https://dev59.com/Jl8d5IYBdhLWcg3wiSnI，并添加了一些gulp模块。 - Venkat.R
3个回答
7

需求：

第一步：(安装插件)

minifyCss 和 gulp-uglify 是由 laravel-elixir 使用的。你需要通过 npm install gulp-newer --save-dev 安装 gulp-newer。

第二步：(定义任务)

你需要为 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 custom srcFile destFile。

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

安装：

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

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

For example:

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任务。

1
看起来不错，但如果我可以将Src和Dest路径作为参数传递就太酷了。因为每个Src和Dest文件都位于不同的位置。所以例如我想要这样的东西：gulp custom srcFile destFile - izupet
@izupet 我认为可以做到。我会检查一下，明天更新我的答案。 - Alex
1
请使用以下gulp模块。 https://www.npmjs.com/package/gulp-minify-css - 缩小所有CSS文件。 https://www.npmjs.com/package/gulp-concat-css - 将所有CSS合并为一个文件。 https://www.npmjs.com/package/gulp-uglify - 缩小所有JS文件。 https://www.npmjs.com/package/gulp-sass - SASS
请参考此答案： Gulp minify multiple js files to one 以下是示例Gulp文件片段。
var gulp = require('gulp'),
  sass = require('gulp-sass'),
  autoprefixer = require('gulp-autoprefixer'),
  jshint = require('gulp-jshint'),
  uglify = require('gulp-uglify'),
  imagemin = require('gulp-imagemin'),
  rename = require('gulp-rename'),
  clean = require('gulp-clean'),
  concat = require('gulp-concat'),
  notify = require('gulp-notify'),
  cache = require('gulp-cache'),
  livereload = require('gulp-livereload'),
  lr = require('tiny-lr'),
  server = lr();

// Clean
gulp.task('clean', function() {
  return gulp.src(['css', 'js', 'img'], {
      read: false
    })
    .pipe(clean());
});


gulp.task('styles', function() {
  return gulp.src('sass/styles.scss')
    .pipe(sass({
      style: 'expanded'
    }))
    .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
    .pipe(gulp.dest('css'))
    .pipe(notify({
      message: 'Styles task complete'
    }));
});

// Concatenate & Minify JS
gulp.task('scripts', function() {
  return gulp.src('js/*.js')
    .pipe(concat('all.js'))
    .pipe(gulp.dest('dist'))
    .pipe(rename('all.min.js'))
    .pipe(uglify())
    .pipe(gulp.dest('dist'));
});


// Watch
gulp.task('watch', function() {

  // Watch .scss files
  gulp.watch('sass/**/*.scss', ['styles']);

  // Watch .js files
  gulp.watch('js/**/*.js', ['scripts']);

  // Watch image files
  gulp.watch('img/**/*', ['images']);

  // Create LiveReload server
  var server = livereload();

  // Watch any files in dist/, reload on change
  gulp.watch(['sass/**', 'js/**', 'img/**', '*.html']).on('change', function(file) {
    server.changed(file.path);
  });

});


gulp.task('default', ['styles', 'scripts', 'watch']);
虽然这个链接可能回答了问题，但最好在此处包含答案的基本部分并提供参考链接。如果链接页面更改，仅链接的答案可能会失效。- 来自审查 - Sablefoste
我同意你的观点。让我更新gul配置片段。但是我很好奇，这个问题是普遍存在的。我认为不需要有片段。无论如何。 - Venkat.R
如果链接发生变化，那么答案可能就没有用了。如果问题比较普遍，那么从链接中复制粘贴关键信息可能是合适的做法。 - Sablefoste
0

首先，您需要将内容存储在新文件中。这个文件的好位置是resources/assets/js：

$jsContent = $request->get('js_custom_content');
file_put_contents(base_path('resources/assets/js/custom.js'), $jsContent);

好的，一旦创建了JavaScript文件，您需要告诉Elixir来压缩自定义脚本：

// it will look for resources/assets/js/custom.js
// and it will compress the output to public/assets/js/custom.min.js
mix.scripts(['custom.js'], 'public/assets/js/custom.min.js');

可选地，您可以对其进行版本控制。这意味着每次脚本内容更改时，gulp都会生成一个新版本，以避免浏览器缓存问题：

mix.version(['public/assets/js/custom.min.js']);

最后，在您的视图中加载脚本：

 <script type="text/javascript" src="{{ url('assets/js/custom.min.js')) }}"></script>

或者使用版本：

<script type="text/javascript" src="{{ url(elixir('assets/js/custom.min.js')) }}"></script>
也许我的问题没有表达清楚，但这不是我要找的。我通过表单接收字符串，并将其保存到文件中。这些文件存储在文件系统的不同位置（而不是资源/资产/js）中，因为这些文件与生成它们的应用程序无关。然后，这些生成的文件用于其他事情。我想知道如何按需缩小这些分散的文件。缩小命令将由php脚本触发。 - izupet
哦！我明白了。人们因为Laravel的标签而感到困惑。你需要将这个特定目的的工作委托给Node.js模块，超出Laravel的范围。 - manix
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接