Laravel minify css and js files
Laravel minify css and js files
我通过html表单接收到自定义的js和css脚本作为字符串。这些字符串然后保存在文件系统上的文件中。问题是如何在每次生成/更新这些文件时缩小它们。我用的是一饮而尽的长生不老药。我的第一个想法是调用exec("gullowsomething"),但不知道如何配置gullow。
要求:
- 大口喝新的
- 迷你通行证
- 狼吞虎咽
第一步:(安装插件)
miniyCss和gullow uglify是laravel长生不老药使用的。您必须通过npm install gulp-newer --save-dev
安装gull更新。
第二步:(定义任务)
您需要为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
});
评论后编辑:
我想要这样的东西:gullow自定义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
完整的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任务
使用下面的gump模块。
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将多个js文件缩小为一个
下面是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']);
首先,您需要将内容存储在一个新文件中。一个很好的地方是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>
- 可以't让我的if语句处理js中的html表单输入
- 使用agility.js进行页面布局和合成
- 使用Clipboard.js复制span文本
- 使用JS如何动态更改显示的html文件中的文本背景颜色
- 强制模板刷新ember.js
- 如何编写HTML输入的JS内联
- Angular JS IE9 Hashbang url rewriting
- 使用JS将数组转换为json对象
- Node.js v6.2.0类扩展不是函数错误
- 当js函数's已执行
- babel with sub js files
- Sails.js req.files为空,req.body.image未定义
- Netbeans 中的 jQuery 代码完成 for *.js Files
- Gzip on js/css files on Django
- node js express app serve static files
- Laravel minify css and js files
- js/php with include files
- Ajax and JS files
- node.js files.upload.path is undefined
- 处理grunt.js中的*no files*错误