Laravel縮小css和js文件

Question

我通過html表單接收自定義的js和css腳本作爲字符串。這些字符串然後保存在文件系統上的文件中。問題是如何在每次生成/更新時縮小這些文件。我正在使用gulp和laravel仙丹。 我的第一個想法是調用exec（「gulp something」），但不知道如何配置gulp。

Answer 1

質量要求：

• gulp-newer
• minifyCss
• gulp-uglify

第一步：（安裝插件）

minifyCss和由laravel-酏劑用於咽-醜化。您必須安裝gulp-newer通過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將縮小文件並將其存儲在目標目錄中。這在本地進行了測試，並且完美運行。

完成咕嘟咕嘟文件

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

評論後編輯：

我想是這樣的：自吞SRCFILE destFile。

對於這種情況，您需要安裝名爲yargs的新插件。

安裝：

您可以通過安裝npm install yargs --save-dev和yargs然後你必須通過源目錄和目標目錄時自定義任務被調用。

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

例如：

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

完成的咕嘟咕嘟文件：

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

注：每一次，源目錄或目標目錄改變，一飲而盡任務必須是再次呼叫。

Answer 2

首先，您需要將內容存儲在新文件中。這方面的一個很好的地方是resources/assets/js：

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

好，一旦創建了JavaScript文件，你需要告訴仙丹再縮小自定義腳本：

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

需要，您可以版本吧。這意味着每次腳本的內容變化，一飲而盡會生成一​​個新的版本，以避免瀏覽器的緩存問題：

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> 

Answer 3

使用下面的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 - Minigy所有的JS文件。 https://www.npmjs.com/package/gulp-sass - SASS

參考這樣的回答： Gulp minify multiple js files to one

下面是樣品咕嘟咕嘟文件片段。

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