搜文章
推荐 原创 视频 Java开发 iOS开发 前端开发 JavaScript开发 Android开发 PHP开发 数据库 开发工具 Python开发 Kotlin开发 Ruby开发 .NET开发 服务器运维 开放平台 架构师 大数据 云计算 人工智能 开发语言 其它开发
Lambda在线 > 交互设计前端开发与后端程序设计 > laravel中使用gulp打包发布前端部分

laravel中使用gulp打包发布前端部分

交互设计前端开发与后端程序设计 2017-11-01

laravel中的前端代码都是形如xxx.blade.php。可以使用前端的工具来对blade,css,js进行压缩吗?当然,gulp可以做到。

gulp是什么?

看完你就明白,这是个自动化构建工具的核心就是gulpfile.js。
用于laravel的gulp怎么写?
把一切*.html换成*.blade.php就行了。

有什么坑要注意?

  1. 异步执行,前后依赖关系必须写明。比如:

    gulp.task('rev' , ['concatCss', 'concatJs'],function() { return gulp.src(['./rev/**/*.json', paths.html])   //- 读取 rev-manifest.json 文件以及需要进行css名替换的文件
         .pipe(revCollector(
             {
                 replaceReved: true,
                 dirReplacements: {                 'css': 'css',                 'js': 'js',
                 }
             }
         ))                                
         .pipe(gulp.dest(dist));                 
    });

    这里先异步执行concatCss和concatJs两个task,然后执行dev。

  2. 在对css和js文件拼接md5后缀的时候,要按照官方文档的方式来写。

最后附上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/";   //写的很简单,都发布到dist下。在laravel下可以配置不同文件类型的发布路径。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() {                                //- 创建一个名为 concat 的 task
    return gulp.src(paths.css)  //- 需要处理的css文件,放到一个字符串数组里
        .pipe(rev())                                           //- 文件名加MD5后缀
        .pipe(cleanCSS({compatibility: 'ie8'}))
        .pipe(gulp.dest(dist+'css/'))                              //- 输出文件本地
        .pipe(rev.manifest())                                  //- 生成一个rev-manifest.json
        .pipe(gulp.dest('./rev/css'));                            //- 将 rev-manifest.json 保存到 rev 目录内});
gulp.task('concatJs', function() {                                //- 创建一个名为 concat 的 task
    return gulp.src(paths.js)  //- 需要处理的css文件,放到一个字符串数组里
        .pipe(rev())                                           //- 文件名加MD5后缀
        .pipe(uglify())
        .pipe(gulp.dest(dist+"js/"))
        .pipe(rev.manifest())                                  //- 生成一个rev-manifest.json
        .pipe(gulp.dest('./rev/js'));                            //- 将 rev-manifest.json 保存到 rev 目录内});
gulp.task('rev' , ['concatCss', 'concatJs'],function() {    return gulp.src(['./rev/**/*.json', paths.html])   //- 读取 rev-manifest.json 文件以及需要进行css,js名替换的文件
        .pipe(revCollector(
            {
                replaceReved: true,
                dirReplacements: {                    'css': 'css',  //这里是把文件中的css换成别的字符串,可以拼接发布目录
                    'js': 'js',    //道理同上
                }
            }
        ))                                 
        .pipe(gulp.dest(dist));                 

});

gulp.task('default', ['compressHtml']);

在命令行运行gulp default
然后去dist里面看看生成了什么吧。




版权声明:本站内容全部来自于腾讯微信公众号,属第三方自助推荐收录。《laravel中使用gulp打包发布前端部分》的版权归原作者「交互设计前端开发与后端程序设计」所有,文章言论观点不代表Lambda在线的观点, Lambda在线不承担任何法律责任。如需删除可联系QQ:516101458

文章来源: 阅读原文

相关阅读

关注交互设计前端开发与后端程序设计微信公众号

交互设计前端开发与后端程序设计微信公众号:interaction_Designer

交互设计前端开发与后端程序设计

手机扫描上方二维码即可关注交互设计前端开发与后端程序设计微信公众号

交互设计前端开发与后端程序设计最新文章

精品公众号随机推荐

上一篇 >>

spring festival