Laravel minimise les fichiers css et js

Obligations:

• Gulp-plus récent
• MinifyCss
• Gulp-uglify

Première étape: ( installer les plugins )

MinifyCss et gulp -uglify sont utilisés par laravel-elixir. Vous devez installer npm install gulp-newer --save-dev par npm install gulp-newer --save-dev .

Deuxième étape: ( définir la tâche )

Vous devez définir différentes tâches pour css et js.

Tâche 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 tâche

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

Troisième étape: ( définir la montre personnalisée )

Vous devriez avoir une tâche de surveillance qui surveille vos répertoires source ( cssSrc et jsSrc ) et appelle sa tâche connexe.

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

Quatrième étape: ( exécuter la montre personnalisée )

Enfin, vous devez exécuter la tâche personnalisée par gulp custom .

Conclusion:

Chaque fois, lorsque le fichier est ajouté au répertoire source. Gulp minifiera le fichier et le stockera dans le répertoire de destination. Ceci est testé localement et il fonctionne parfaitement.

Fichier Gulp complété

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

Edité après commentaire:

J'aimerais quelque chose comme ça: gulp custom srcFile destFile.

Pour cette situation, vous devez installer un nouveau plugin appelé les yargs .

Installation:

Vous pouvez installer des yargs par npm install yargs --save-dev et ensuite vous devez passer le répertoire source et le répertoire de destination lorsque la tâche personnalisée est appelée.

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

Par exemple:

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

Le fichier Gulp complété:

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

Remarque: Chaque fois, le répertoire source ou le répertoire de destination est modifié, la tâche de goulp doit être appelée à nouveau.

Utilisez les modules de goulp ci-dessous.

https://www.npmjs.com/package/gulp-minify-css – Minimisez tous vos fichiers css. https://www.npmjs.com/package/gulp-concat-css – Fusionnez tous vos css dans un seul fichier. https://www.npmjs.com/package/gulp-uglify – Minigy tous vos fichiers JS. https://www.npmjs.com/package/gulp-sass – SASS

Reportez-vous à cette réponse: Gulp minifie plusieurs fichiers js sur un

Voici un exemple d'extrait de fichier 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']); 

Au premier endroit, vous devez stocker le contenu dans un nouveau fichier. Un bon endroit pour cela est les resources/assets/js :

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

Ok, une fois que vous avez créé le fichier javascript, vous devez indiquer à Elixir de minimiser le script personnalisé:

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

En option, vous pouvez la version. Cela signifie que chaque fois que le contenu du script change, gulp générera une nouvelle version afin d'éviter les problèmes de cache du navigateur:

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

Enfin, chargez le script dans votre vue:

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

Ou avec la version:

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