Laravel利用gulp如何构建前端资源详解

什么是gulp？

gulp是新一代的前端项目构建工具，你可以使用gulp及其插件对你的项目代码（less,sass）进行编译，还可以压缩你的js和css代码，甚至压缩你的图片，gulp仅有少量的API，所以非常容易学习。 gulp 使用 stream 方式处理内容。Node催生了一批自动化工具，像Bower，Yeoman，Grunt等。

gulp和grunt的异同点

易于使用：采用代码优于配置策略，Gulp让简单的事情继续简单，复杂的任务变得可管理。

高效：通过利用Node.js强大的流，不需要往磁盘写中间文件，可以更快地完成构建。

高质量：Gulp严格的插件指导方针，确保插件简单并且按你期望的方式工作。

易于学习：通过把API降到最少，你能在很短的时间内学会Gulp。构建工作就像你设想的一样：是一系列流管道。

引言

最近把自己主页前端代码进一步规范了，使用 npm 引入一些前端的资源库，在 Laravel 5.5 中使用 gulp 遇到一些坑。

mix.sass 无法直接使用 node_modules 文件夹里的，只能用 resource/assets/sass/app.scss 这个文件生成 css，然后和其他的 css 合并为一个文件。

mix.scripts 可以使用 node_modules 文件夹里的 js，并和自己的 js 合并为一个文件。

mix.copy 可以复制 node_modules 中的文件到指定的目录，比如字体。

mix.version 可以给合并后的文件增加版本号。

贴出我最终的配置如下：

elixir(function (mix) {
 mix.sass([
  'app.scss'
 ], 'public/css')
  .styles([
   './public/css/app.css',
   'style.css',
   'pill.css',
  ], 'public/css/site.css')
  .styles([
   './public/css/app.css',
   'cover.css',
  ], 'public/css/cover.css')
  .scripts([
   './node_modules/jquery/dist/jquery.min.js',
   './node_modules/bootstrap-sass/assets/javascripts/bootstrap.min.js',
   'scrollerup.js'
  ],'public/js/app.js')
  .copy([
   './node_modules/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.woff',
   './node_modules/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.woff2'
  ], 'public/build/fonts/bootstrap')
  .version([
   'public/css/cover.css',
   'public/css/site.css'
  ]);
});

以上代码出自我的 gulpfile.js 文件。

运行 gulp 命令，线上运行 gulp –production.

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对我们的支持。

赞 (0)

相关推荐

  • Laravel利用gulp如何构建前端资源详解

    Laravel利用gulp如何构建前端资源详解

    什么是gulp? gulp是新一代的前端项目构建工具,你可以使用gulp及其插件对你的项目代码(less,sass)进行编译,还可以压缩你的js和css代码,甚至压缩你的图片,gulp仅有少量的API,所以非常容易学习. gulp 使用 stream 方式处理内容.Node催生了一批自动化工具,像Bower,Yeoman,Grunt等. gulp和grunt的异同点 易于使用:采用代码优于配置策略,Gulp让简单的事情继续简单,复杂的任务变得可管理. 高效:通过利用Node.js强大的流,不需要

  • 利用二进制文件安装etcd的教程详解

    利用二进制文件安装etcd的教程详解

    etcd组件作为一个高可用强一致性的服务发现存储仓库. etcd作为一个受到ZooKeeper与doozer启发而催生的项目,除了拥有与之类似的功能外,更专注于以下四点. 简单:基于HTTP+JSON的API让你用curl就可以轻松使用. 安全:可选SSL客户认证机制. 快速:每个实例每秒支持一千次写操作. 可信:使用Raft算法充分实现了分布式. 场景一:服务发现(Service Discovery)一个强一致性.高可用的服务存储目录.基于Raft算法的etcd天生就是这样一个强一致性高可用的

  • 使用git迁移Laravel项目至新开发环境的步骤详解

    对于如何创建一个Laravel项目,相信对新接触Laravel的朋友并不存在太多的问题,但是今天我们要来看一下如何将已有的Laravel项目迁移(复制)到新的开发环境. 我们需要用到的工具是git,如果你不知道git是什么,这里有一个传送门,看完之后再回来: http://github.com 简单说来,git就是Github开发的VCS(Version Control System),即版本控制系统.如果你使用过SVN,那么你应该很清楚版本控制是什么. 本文的示例环境是Ubuntu 16.04

  • 如何利用Ajax实现地区三级联动详解

    如何利用Ajax实现地区三级联动详解

    前言: 利用Ajax来实现一个地区的三级联动,用Java代码来读json文件,先eclipse做一个简单的,最基础的.(json我用的jackson来解析,也可用fastjson-阿里巴巴的等还有很多)提供代码,思路之类的,注释也没有自己去想去琢磨出来的思路好 first:首先先要熟悉json文件,并要想好利用什么类型去解析,这是最难的,最好找一个没人的地方戴上耳机(对于初学)我是用maven来做的用到的jar坐标 : <dependency> <groupId>redis.cli

  • 利用Matlab制作环形相册效果详解

    利用Matlab制作环形相册效果详解

    目录 运行效果 完整步骤 1.图片准备及导入 2.为每张图片制作遮罩层 3.调整每张图大小 4.绘图及绘图参数详解 完整代码 运行效果 完整步骤 1.图片准备及导入 要制作一款相册足够的图片量是必不可少的,不然整个相册只有一张图来回重复多没意思呀,因此我们需要一个文件夹专门放图片,为了方便导入,这里全部都是jpg格式: 图片导入代码: path='.\album\';%文件夹路径 files=dir(fullfile(path,'*.jpg')); picNum=size(files,1); %

  • 使用Vite+Vue3+Vant全家桶快速构建项目步骤详解

    使用Vite+Vue3+Vant全家桶快速构建项目步骤详解

    目录 引言 一.vue3全家桶模板介绍 1.版本依赖 2.全家桶内置集成 二.安装 tive-cli 命令行工具 三.生成项目 四.项目体验 引言 随着Vue3 和 Vite 版本的不断更新完善,开发体验有了质的飞跃.因此,越来越多的大厂也逐步拥抱 Vue3. 利用Vite 脚手架工具可以很轻松生成以 Vue3 为模板的项目,但是作为Vue全家桶的 vue-router.vuex.axios等成员,需要自己一个一个去配置.于是便自行开发了本文讲到的 tive-cli 脚手架模板工具,只需短短几个

  • Vue qiankun微前端实现详解

    目录 引言 What:微前端是什么 Why:为什么选择微前端 微前端能做到什么 为什么不使用iFrame How:微前端实践 在主应用中注册微应用 在子应用导出相应的生命周期钩子 结尾 引言 前端时间有个契机,让我们团队开始进行微前端的相关实践. 最近正好有些成果了,来一个阶段性的总结,也方便后续进一步的开发. 可能第一次听说微前端的同学都会不明觉厉,那么ta到底是个啥?本章会从以下3个角度阐述我的理解: What:微前端是什么 Why:为什么选择微前端 How:微前端实践 What:微前端是什

  • Flask利用自定义接口实现mock应用详解

    问题:后端接口已提供,前端需要依赖后端接口返回的数据进行前端页面的开发,如何配合前端? mock接口 flask自定义接口实现查询接口:查询全部.部分查询 具体看下面的代码: #导入包 from flask import Flask,jsonify #定义内容属性 app = Flask(__name__) #处理中文乱码问题 app.config["JSON_AS_ASCII"]=False #接口数据,接口文档(已知) 多个参数 user_data=[ {"id"

  • 微信小程序 利用css实现遮罩效果实例详解

    微信小程序 利用css实现遮罩效果实例详解

    微信小程序 利用css实现遮罩效果实例详解 实现效果图: 如图所示,使用css实现小程序的遮罩效果,代码如下 js文件代码: //index.js //获取应用实例 var app = getApp() Page({ data: { flag: false }, a: function(){ this.setData({flag: false}) }, b: function(){ this.setData({flag: true}) } }) wxss文件代码: .b1{position:fi

  • PHP laravel中的多对多关系实例详解

    PHP laravel中的多对多关系实例详解

    数据表之间是纵横交叉.相互关联的,laravel的一对一,一对多比较好理解,官网介绍滴很详细了,在此我就不赘述啦,重点我记下多对多的关系 一种常见的关联关系是多对多,即表A的某条记录通过中间表C与表B的多条记录关联,反之亦然.比如一个用户有多种角色,反之一个角色对应多个用户. 为了测试该关联关系,我们沿用官网的用户角色示例: 需要三张数据表:users.roles 和 role_user,role_user 表按照关联模型名的字母顺序命名(这里role_user是中间表),并且包含 user_i

随机推荐