laravel的elixir和gulp用来对前端施工
使用laravel elixer
npm install --global gulp ok
然后在安装好的laravel 下 npm install 以安装 laravel-elixir
sublime 安装AdvancedNewFile 插件 使用ctrl+alt+n 输入路径方便新建文件(也可以手动,图方便)
(具体使用)在gulpfile.js 里写
var elixer = require('laravel-elixir');elixir(function(mix){mix.sass('app.scss'); });
然后命令行在此项目根目录下 gulp 自动编译开始了.
会自动保存到public/css/app.css
查找编译的路径和编译文件的路径以及其它编译选项
在node_modules/laravel-elixer/Config.js
可在这里更改,也可以(更好的方式)在gulpfile.js里重写覆盖
如关闭生成sourcemap
elixer.config.sourcemaps = false;
多个文件合并到一个public/css/app.css下 mix.sass(['xx.scss','bb.scss']);多个分别保存到不同地方 mix.sass('app.scss','public/foo/bar/app.css').sass('button.scss','bbb/aa/a.css'); bbb...前不要加 / ,在项目根目录下生成bbb目录合并并保存到自定义路径 mix.sass(['app.scss','button.scss'],'public/custom/');合并css 文件 mix.styles(['sss.css','xxx.css'],'public/foo/bar/')指定合并的css文件的来源(通过传入的第三个参数指定) mix.styles(['sss.css','xxx.css'],'public/foo/bar','sources/css/');合并脚本则为(同样可以传入第三个参数指定来源) mix.styles(....);将指定文件改变版本并在页面正确引用 (main.css 变为 main-sdsk.css等防止被浏览器缓存) mix.sass(['app.scss','bbb.scss']).version('css/app.css');页面引用时 <link rel="stylesheet" href="{{ elixir('css/app.css') }}">note: version()内文件路径相对于在public/下 所以不用写public,变换版本后文件存在public/build/下 version(['xxx.css','xxx.js']); .version()内可以使用数组 变换多个文件 elixir()内文件路径相对于在public/build/下生成生产环境下的源代码 gulp --production
过程中遇到的问题:
npm warn optional dep failed ,continuing fsevents@0.3.8再运行一次变成了 npm warn unmet dependency尝试npm cache clean 后再安装仍然warn unmet .... 于是跑到它的具体缺失模块下去安装 npm install参考 http://www.lellansin.com/npm-%E5%AE%89%E8%A3%85%E5%87%BA%E7%8E%B0-unmet-dependency-%E7%9A%84%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88.html npm unmet dependency 的解释http://stackoverflow.com/questions/20764881/why-does-npm-install-say-i-have-unmet-dependencies 依赖包解决方案有一点破坏,我可以尝试把 unmet的 包 装在首级使用npm list 或者npm list parseable=true检查 through2 由broswerfy要求^1.0.0以上 而目前版本是0.6.5npm update through2@^1.1.0 --save然后npm list 查看问题 再安装需要版本的 npm install browserify@11.0.1继续npm list 查看是否有问题
参考: http://www.golaravel.com/laravel/docs/5.0/elixir/
转载于:https://www.cnblogs.com/isdom/p/webclips027.html
laravel的elixir和gulp用来对前端施工相关推荐
- 用gulp构建你的前端项目
前言 前端技术发展日新月异,随着模块化.组件化的提出,前端变得越来越复杂,静态资源越来越多,那么对静态资源的处理,如压缩,合并,去掉调试信息.. 如果还是人工去处理,效率非常之低且还容易出错,于是自动 ...
- 利用gulp处理简单的前端问题
利用gulp处理js和less或者sass或者css 文件目录 /项目根目录 -gulpfile.js -package.json -/images -/src --/less --/js --*.h ...
- gulpfile php,Laravel利用gulp如何构建前端资源详解
什么是gulp? gulp是新一代的前端项目构建工具,你可以使用gulp及其插件对你的项目代码(less,sass)进行编译,还可以压缩你的js和css代码,甚至压缩你的图片,gulp仅有少量的API ...
- elixir 教程_认识Elixir,Laravel编译资产的方式
elixir 教程 Many thanks to Jad Joubran, Gabriel Zerbib, Anthony Chambers, and Scott Molinari for peer ...
- angular手机应用_灵活且易于维护的Laravel + Angular材质应用
angular手机应用 In this article, we're going to set up a Laravel API with Angular Material for the front ...
- Vuebnb:一个用vue.js和Laravel构建的全栈应用
2019独角兽企业重金招聘Python工程师标准>>> 今年我一直在写一本新书叫全栈Vue网站开发:Vue.js,Vuex和Laravel.它会在Packt出版社在2018年初出版. ...
- 前端基于gulp后端基于freemarker的工作流程总结
前言 最近在做一个PC端的项目,由于项目需要兼容到IE8,所以从技术选型上采取了公司之前一直沿用的前端基于gulp后端基于freemarker的模式来进行开发. 那么gulp+freemarker这种 ...
- gulp与webpack的区别
常有人拿gulp与webpack来比较,知道这两个构建工具功能上有重叠的地方,可单用,也可一起用,但本质的区别就没有那么清晰. gulp gulp强调的是前端开发的工作流程,我们可以通过配置一系列的t ...
- Gulp在前端的常用操作实例
以前在做代码优化的时候,一般都用一些网上的在线工具来完成,写LESS的时候,一般用Koala来编译,感觉用起来也挺不错的.但是现在构建工具的出现,让以前做的那些繁琐操作变的更方便一些了,我在这里也用构 ...
- laravel+vue开发环境搭建
From: https://www.jianshu.com/p/1c2cc11ba46f 描述 最近通过laravel在公司做了一些项目,但本身前端出身的我,总是感觉lphp开发过程中,前端写好页面, ...
最新文章
- flask数据库迁移理解及命令
- jfinal使用render之后还会继续往下执行代码吗
- matlab余割平方方向图,基于余割平方赋形波束的宽带微带阵列天线设计
- UNP Chapter 27 - 客户-服务器程序其他设计方法
- 千橡CEO给应聘者的信
- Java底层抛出异常_总结java的exception
- [洛谷P3957] 跳房子
- 粤嵌GE6818实现识别触摸坐标的识别
- mysql数据库运维_开源数据库MySQL DBA运维实战3
- 模板匹配之zernike矩
- nginx对PHP文件报File not found.错
- android MVC和MVP探讨
- 手把手教会你mp3音频转文字怎么操作,快来码住
- Invest模型 ——生境质量计算
- 参考文献格式、论文尾注
- MTK_android11_WIFI(内网)和4G(外网)共存
- 在Layui框架里设计一个评论列表的前端界面
- html 使用iframe引入视频但无法全屏播放,问题解决
- java反射类型转换_Java反射探索研究(转)
- fn映射 mac 键盘_如何在Mac OS X下修改Fn键的属性?