laravel中的前端代碼都是形如xxx.blade.php擅耽×肝耄可以使用前端的工具來對(duì)blade,css,js進(jìn)行壓縮嗎蚊荣？當(dāng)然，gulp可以做到莫杈。
看完你就明白，這是個(gè)自動(dòng)化構(gòu)建工具的核心就是gulpfile.js筝闹。
用于laravel的gulp怎么寫媳叨？
把一切****.html換成****.blade.php就行了。
有什么坑要注意关顷？
- 異步執(zhí)行糊秆，前后依賴關(guān)系必須寫明。比如：
gulp.task('rev' , ['concatCss', 'concatJs'],function() {
return gulp.src(['./rev/**/*.json', paths.html]) //- 讀取 rev-manifest.json 文件以及需要進(jìn)行css名替換的文件
.pipe(revCollector(
{
replaceReved: true,
dirReplacements: {
'css': 'css',
'js': 'js',
}
}
))
.pipe(gulp.dest(dist));
});
這里先異步執(zhí)行concatCss和concatJs兩個(gè)task议双，然后執(zhí)行dev痘番。
- 在對(duì)css和js文件拼接md5后綴的時(shí)候，要按照官方文檔的方式來寫平痰。
最后附上gulpfile.js的代碼：
var gulp = require('gulp');
var uglify = require('gulp-uglify');
var rev = require('gulp-rev');
var revCollector = require('gulp-rev-collector');
var cleanCSS = require('gulp-clean-css');
var htmlmin = require('gulp-htmlmin');
var paths = {
css: "css/*.css",
js: "js/*.js",
html: "./*.blade.php"
};
var dist = "./dist/"; //寫的很簡(jiǎn)單汞舱，都發(fā)布到dist下。在laravel下可以配置不同文件類型的發(fā)布路徑宗雇。
gulp.task('compressHtml',['rev'],function () {
var options = {
removeComments: true,//清除HTML注釋
removeScriptTypeAttributes: true,//刪除`<script>`的type="text/javascript"
removeStyleLinkTypeAttributes: true,//刪除`<style`>和`<link>`的type="text/css"
minifyCSS: true,//壓縮頁面CSS
collapseWhitespace: true,
minifyJS: true,
};
return gulp.src(dist+'*.blade.php')
.pipe(htmlmin(options))
.pipe(gulp.dest(dist));
});
gulp.task('concatCss',function() { //- 創(chuàng)建一個(gè)名為 concat 的 task
return gulp.src(paths.css) //- 需要處理的css文件昂芜，放到一個(gè)字符串?dāng)?shù)組里
.pipe(rev()) //- 文件名加MD5后綴
.pipe(cleanCSS({compatibility: 'ie8'}))
.pipe(gulp.dest(dist+'css/')) //- 輸出文件本地
.pipe(rev.manifest()) //- 生成一個(gè)rev-manifest.json
.pipe(gulp.dest('./rev/css')); //- 將 rev-manifest.json 保存到 rev 目錄內(nèi)
});
gulp.task('concatJs', function() { //- 創(chuàng)建一個(gè)名為 concat 的 task
return gulp.src(paths.js) //- 需要處理的css文件，放到一個(gè)字符串?dāng)?shù)組里
.pipe(rev()) //- 文件名加MD5后綴
.pipe(uglify())
.pipe(gulp.dest(dist+"js/"))
.pipe(rev.manifest()) //- 生成一個(gè)rev-manifest.json
.pipe(gulp.dest('./rev/js')); //- 將 rev-manifest.json 保存到 rev 目錄內(nèi)
});
gulp.task('rev' , ['concatCss', 'concatJs'],function() {
return gulp.src(['./rev/**/*.json', paths.html]) //- 讀取 rev-manifest.json 文件以及需要進(jìn)行css赔蒲，js名替換的文件
.pipe(revCollector(
{
replaceReved: true,
dirReplacements: {
'css': 'css', //這里是把文件中的css換成別的字符串泌神，可以拼接發(fā)布目錄
'js': 'js', //道理同上
}
}
))
.pipe(gulp.dest(dist));
});
gulp.task('default', ['compressHtml']);
在命令行運(yùn)行g(shù)ulp default
然后去dist里面看看生成了什么吧良漱。
