laravel elixir

npm install
npm install jquery --save

//bootsrap3.36 与 jquery3不兼容,下载jquery时可能需要确定版本号

npm install [email protected]2.x  --save

编辑 resources/assets/sass/app.scss

@import "variables";

@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";

创建variables.scss,改写bootstrap样式变量

$body-bg:               #FEFEFE;
$brand-primary:         darken(skyblue, 6.5%);
$panel-bg:              #AFEEEE;

创建文件: resources/assets/js/app.js

window.$ = window.jQuery = require(‘jquery‘);

require(‘bootstrap-sass‘);

$( document ).ready(function() {
    console.log($.fn.tooltip.Constructor.VERSION);
});

以上为引入jquery, 引入bootstrap.js, console.log 记录bootstrap版本号(测试用)

编辑项目根目录下的 gulpfile.js :

var elixir = require(‘laravel-elixir‘);

elixir(function(mix) {
    mix.sass(‘app.scss‘)
        .browserify(‘app.js‘)
        .version([‘css/app.css‘, ‘js/app.js‘]);
});

运行gulp生成文件,在app.blade.php里就可以进行引入了

...

<link href="{{ elixir(‘css/app.css‘) }}" rel="stylesheet">

...
...

<script src="{{ elixir(‘js/app.js‘) }}"></script>

...
时间: 2024-10-15 15:09:33

laravel elixir的相关文章

laravel性能优化技巧(转)

说明 性能一直是 Laravel 框架为人诟病的一个点,所以调优 Laravel 程序算是一个必学的技能. 接下来分享一些开发的最佳实践,还有调优技巧,大家有别的建议也欢迎留言讨论. 这里是简单的列表: 配置信息缓存 artisan config:cache 路由缓存 artisan route:cache 类映射加载优化 artisan optimize 自动加载优化 composer dumpautoload 使用 Memcached 来存储会话 config/session.php 使用专

Laravel 5 性能优化技巧

说明 性能一直是 Laravel 框架为人诟病的一个点,所以调优 Laravel 程序算是一个必学的技能. 接下来分享一些开发的最佳实践,还有调优技巧,大家有别的建议也欢迎留言讨论. 这里是简单的列表: 配置信息缓存 artisan config:cache 路由缓存 artisan route:cache 类映射加载优化 artisan optimize 自动加载优化 composer dumpautoload 使用 Memcached 来存储会话 config/session.php 使用专

laravel 中 与前端的一些事2 之使用Gulp编译sass

下载所有依赖npm的packagist: 下载了前端laravel  elixir编译所需要的全部工具: gulp编译scss文件: scss文件的默认存放位置: 输入命令gulp 开始编译scss文件: 编译成功后 存放在public/css/app.css 使用场景二:

Laravel 5.1 中文文档

原文链接:http://laravelacademy.org/laravel-docs-5_1 由Laravel学院提供的Laravel 5.1 中文文档,供学习参考用,如有纰漏,请斧正: 序言 发行版本说明 升级指南 贡献代码 API文档 开始 安装及配置 Laravel Homestead 基础 HTTP 路由 HTTP 中间件 HTTP 控制器 HTTP 请求 HTTP 响应 视图 Blade 模板引擎 架构 一次请求的生命周期 应用目录结构 服务提供者 服务容器 契约(Contracts

Laravel 5.1 Beauty - Testing

Note this is the fourth step of the tutorial. In this chapter we'll create a project to use throughout the rest of the book and explore various options for testing. Along the way a service class to convert Markdown formatted text files to HTML will b

基于 Laravel 开发博客应用系列 —— 从测试开始(二):使用Gulp实现自动化测试

3.使用 Gulp 进行 TDD(测试驱动开发) Gulp 是一个使用 JavaScript 编写的自动化构建工具.用于对前端通用任务(如最小化.压缩.编译)进行自动构建.Gulp 还可以用来监控源代码的改动并自动运行任务. Laravel 5.1 提供了一个封装 Gulp 的 Laravel Elixir 包,可用于轻松构建 Gulp 任务,Elixir 为 Gulp 添加了优雅的语法,Elixir 之于 Gulp 正如 Laravel 之于 PHP. Gulp 最常见的用法之一就是自动构建单

laravel 5 优化

性能一直是 Laravel 框架为人诟病的一个点,所以调优 Laravel 程序算是一个必学的技能. 接下来分享一些开发的最佳实践,还有调优技巧,大家有别的建议也欢迎留言讨论. 这里是简单的列表: 配置信息缓存 artisan config:cache 路由缓存 artisan route:cache 类映射加载优化 artisan optimize 自动加载优化 composer dumpautoload 使用 Memcached 来存储会话 config/session.php 使用专业缓存

优化Laravel5框架程序的10条技巧

性能一直是 Laravel 框架为人诟病的一个点,所以调优 Laravel 程序算是一个必学的技能.接下来分享一些开发的最佳实践,还有调优技巧,大家有别的建议也欢迎留言讨论.这里是简单的列表:配置信息缓存 artisan config:cache路由缓存 artisan route:cache类映射加载优化 artisan optimize自动加载优化 composer dumpautoload使用 Memcached 来存储会话 config/session.php使用专业缓存驱动器 conf

laravel-mix 文档翻译

英文文档在github上 概览 基本示例 安装 laravel 工作流程 laravel mix  VS laravel Elixir 常见问题 API JavaScript 代码拆分 browserSync HMR 版本 CSS预处理 拷贝文件/目录 系统通知 合并和压缩 自动加载 事件钩子 自定义webpack配置 常用插件 LiveReload jQueryUI 高级配置 laravel-mix 选项 基本示例 larave-mix是在webpack上的一个简洁的层,使80%的用例执行起来