Magento 2 windows 开发环境 Grunt css样式管理 livereload 实时预览

最新推荐文章于 2021-08-18 14:32:53 发布
最新推荐文章于 2021-08-18 14:32:53 发布
阅读量345 收藏
点赞数
分类专栏： Magento Windows
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lsqtzj/article/details/110153249
版权

目录

1、Grunt安装前准备

1）把 package.json.sample Gruntfile.js.sample 这两个文件的.sample去掉

2）复制 \dev\tools\grunt\configs\themes.js 文件，改名为 local-themes.js

2、安装Grunt

3、Grunt 测试

4、碰到的问题

1）运行grunt exec:luma出错

2）多样式模板local-themes.js配置 

 5、实时预览 LiveReload 配置

1）magento目录安装livereload插件

2）下载livereload.js 到magento目录

3）在模板中加载livereload.js

4）关闭 Magento_Csp

5）开启grunt监控 

6）安装浏览器插件

1、Grunt安装前准备

1）把 package.json.sample Gruntfile.js.sample 这两个文件的.sample去掉

2）复制 \dev\tools\grunt\configs\themes.js 文件，改名为 local-themes.js

2、安装Grunt

npm install -g grunt-cli
npm install
php bin/magento cache:clean
grunt clean

3、Grunt 测试

grunt exec:luma          #生成链接文件 ，luma是系统模板名称
grunt less:luma          #生成css
grunt watch              #开启监控

4、碰到的问题

1）运行grunt exec:luma出错

In File.php line 371:
>>   A symlink for "C:/www/magento/vendor/magento/theme-frontend-blank/web/css/source/_reset.less" can't be created and placed to "C:/www/magento/pub/static/frontend/Magento/blank/en_US/css/source/_reset.less". 

>>   Warning!symlink(): Cannot create symlink, error code(1314)

以管理员方式运行CMD再执行grunt exec:luma

2）多样式模板local-themes.js配置 

上图为目录结构，在module.exports = { 加入模板配置：

    name_01: {
        area: 'frontend',
        name: '所有者/模板名称_layout01',
        locale: 'it_IT',
        files: [
            'css/styles-m',
            'css/styles-l',
            'css/print'
        ],
        dsl: 'less'
    },
    name_02: {
        area: 'frontend',
        name: '所有者/模板名称_layout02',
        locale: 'it_IT',
        files: [
            'css/styles-m',
            'css/styles-l',
            'css/print'
        ],
        dsl: 'less'
    }，

 5、实时预览 LiveReload 配置

1）magento目录安装livereload插件

npm install -g livereload

2）下载livereload.js 到magento目录

直接下载 livereload.js  或 开源网站下载 https://github.com/livereload/livereload-js

3）在模板中加载livereload.js

在模板目录创建 <所有者\模板名称\layout02\>Magento_Theme\layoutdefault_head_blocks.xml文件

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <script src="http://magento:35729/livereload.js" src_type="url" />
    </head>
</page>

4）关闭 Magento_Csp

关闭magento_CSP 防止js被禁用 

php bin/magento module:disable Magento_Csp

5）开启grunt监控 

 注意：grunt exec需要管理员权限

grunt clean && grunt exec:name_02 && grunt less:name_02 && grunt watch

在vs code 执行，可以在magento目录创建 grunt_run.bat 文件

@echo off
>nul 2>&1 "%SYSTEMROOT%\system32\cacls.exe" "%SYSTEMROOT%\system32\config\system"
if '%errorlevel%' NEQ '0' (
goto UACPrompt
) else (goto gotAdmin)
:UACPrompt
echo Set UAC = CreateObject^("Shell.Application"^) > "%temp%\getadmin.vbs"
echo UAC.ShellExecute "%~s0", "", "", "runas", 1 >> "%temp%\getadmin.vbs"
"%temp%\getadmin.vbs"
exit /B
:gotAdmin
if exist "%temp%\getadmin.vbs" (del "%temp%\getadmin.vbs" )
pushd "%CD%"
CD /D "%~dp0"
grunt clean && grunt exec:martfury_02 && grunt less:martfury_02 && grunt watch

打开 TERMINAL 输入 ./grunt_run 进行调用

6）安装浏览器插件

chrome插件 其他浏览器，看官网http://livereload.com/extensions/

注意：实心点为开启状态，调试网站用http://127.0.0.1 打开，不要用ssl https://127.0.0.1

现在修改样式保存后就会自动刷新页面了。

CyrusZhou
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
magento2:前端如何使用grunt 编译less
Sol的博客
09-22 307
1.安装node 2.安装grunt 3.安装 grunt-cli 4.在项目根目录下 把以下文件 替换为 对应文件 package.json.sample 替换为 package.json Gruntfile.js.sample 替换为 Gruntfile.js grunt-config.json.sample 替换为 grunt-config.json 其他文件不需要改变，只需把grunt-config.js文件中的 { "themes": "dev/tools/grunt/configs/loc
magento-grunt:Magento商店的基本Grunt设置
05-22
咕unt声设置 该存储库包含Grunt的基本安装。 包括所有必需的文件，其余文件可以通过命令行初始化。 依存关系 为了使其正常工作，您将需要安装一些东西。 正在安装 获取文件 安装此设置应该和克隆存储库一样简单： git clone git@github.com:james-jlo-long/magento-grunt.git folder-name 只要记住用包含您的Magento商店的文件夹folder-name替换folder-name 。 或者，您可以下载文件并将其复制到文件夹中。 文件应该很少。 初始化Node包 克隆后，导航到该文件夹​​并在命令行中运行以下命令： npm-init npm update 运行npm-init将调整package.json文件-请确保在此阶段添加正确的名称。 您以后可以随时更改它，因此，即使您忘记了该阶段，也不必担心。 更新.gitig
为Magento2新主题添加使用Grunt
dfplrtyx049773的博客
03-04 160
为Magento2新主题添加使用Grunt Go to\dev\tools\grunt\configs, open your themes.js file, and change it according to the following example: ...
magento-2-gulp：Magento 2的Gulp。它与Magento核心样式（较少）和结构一起使用。 使用来自devtoolsgruntconfigslocal-themes.js的默认主题配置
02-03
入门 检查节点和NPM 在尝试安装gulp（支持gulp 3.xx ）之前，请确保已安装了Node和NPM。 $ node -v $ npm -v 全局安装Gulp $ npm install gulp -g 项目整合 作曲家 将存储库的路径添加到composer.json "repositories": [ { "type": "github", "url": "https://github.com/bobmotor/magento-2-gulp" } ], 跑 $ composer require --dev bobmotor/mag
Magento修改css样式更新之——grunt命令使用
dfplrtyx049773的博客
03-04 230
Magento修改css样式更新之——grunt命令使用 1、清除pub/static和var中相应文件 2、源头文件重新导入pub/static 3、pub中的less编译 4、字面翻译是跟踪源头文件变化实时编译，但是这里的the source files指...
magento-dockerlab:基于Docker的Magento 2的完整开发环境
03-17
Magento 2的开发环境。 Magento DockerLab旨在成为一种便捷的Magento 2 Docker开发环境设置。 此环境的一些关键功能包括： 在几秒钟内设置一个Magento 2开发环境。 您只需一行命令即可获得最新的Magento 2版本...
Mac和Linux上最快的Magento 2 Docker开发环境-Linux开发
05-27
Magento 2 Dockergento使用docker即插即用的Magento 2开发环境。 在Mac和Linux上有史以来最快的性能。 性能比较与标准的Magento 2 Dockergento相比，在Mac上的开发体验快7倍，可通过docker随插即用地玩Magento 2开发...
magento2-developer-quickdevbar:Magento2的开发人员工具栏
04-29
Magento2的开发人员工具栏 关于 希望此调试工具栏可以加快Magento2开发模块的速度。 任何改进该工具栏的反馈和想法都将受到赞赏，因此请通过的取得联系。 随意分叉和拉动请求。 该工具栏的结构非常简单，您只需要在...
magento2后端开发
08-22
描述中提到了“Magento2后端开发英文文档”，这表明文档可能是用英语写成的，而文档本身可能是为准备成为Magento 2认证专业开发者而设计的教材。 文档中还提到了一些与Magento 2认证专业开发者考试相关的信息。例如...
mage2_ext_csp:Magento 2模块收集CSP违规报告并消除JS控制台警告
05-07
mage2_ext_csp 收集CSP违规报告并将其转换为CSP规则的模块。 注意力！ 从0.0.5版开始模块的功能处于。 您需要在“ Stores / Configuration / Security / CSP / General显式启用模块。 描述 Magento 2.3.5+的Javascript控制台中有很多（CSP）警告： 此模块添加report-uri ...; CSP标头的指令，收集（分别针对管理和前端区域），然后生成新以消除控制台中的CSP警告。 用于分析报告和生成规则的Cron任务每小时开始一次。 该模块的主要目的是从JS控制台中完全消除CSP错误，但是您可以使用此模块仅收集报告（只需在禁用对新规则的激活）。 在将所有违规报告都转换为规则并且所有不允许的内容将被浏览器锁定之后，可以将CSP从仅报告模式切换为严格模式（在配置中将Report Only设置为fal
livereload
11-27
livereload插件，可直接拖到插件拓展页面，Livereload可理解为即时刷新，在前端开发中，开发者在编写或调试html/js/css代码后需要从编辑器切换到浏览器，再刷新浏览器才能看到页面变化，这种十分频繁的操作在一定程度上影响了工作效率，而Liverelod可以帮助我们ad解决了这个问题。
php商城如何安装,Magento2 php商城在windows10上安装
weixin_42499899的博客
04-11 237
Magento2 php商城在windows10上安装,magento2下载地址:https://github.com/magento/magento2/archive/develop.zip参考地址: 版本要求 这个magento2 要选择好php的版本 下载综合版服务器时看好这个服务器支持的具体版本 下边的网站有具体的版本要求页,在此就不列出了https://www.magentochin...
Magento技术架构简介
陈小峰（iefreer）的专栏
06-04 9022
http://magentophp.blogspot.jp/2010/08/magento-architecture.html
magento form.html不显示 window 和 Linux下的区别
dianlei9877的博客
08-12 386
window 无大小写区别，所以可以显示表框 Linux 大小写敏感，显示不了 \app\code\community\Company\BabyPay\Model\Payment.php 里定义了form protected $_code = 'BabyPay_payment'; protected $_formBlockType = 'BabyPay/form';...
【magento2命令行安装 WINDOWS】Magento 2 Design Theme tab 没有找到
PHP程序员 - muzihao2014
04-11 729
问题： Stores > Configuration > Design.  中设置design ，按照官方文档 没有找到 解决方法： 我用的是2.1版本 ，后来发现在这里 Content/Design/Configuration
magento2 常用控制台指令
weixin_33743703的博客
06-13 186
grunt clean:vargrunt clean:pubgrunt deploygrunt exec:mythemebin/magento indexer:reindexbin/magento cache:flushbin/magento setup:upgradebin/magento module:enable xxxx ...
Windows上安装Magento2.3
wustzdd的博客
07-15 510
Magento 2的系统要求 PHP- PHP 5.6以上 数据库-MySQL 5.6+ Web服务器-Apache 2.2x或Nginx 1.7x 操作系统-跨平台 浏览器-Google Chrome，Internet Explorer或Firefox等 安全套接字层（SSL）-HTTPS的有效安全证书 WNMP - PHP，MySQL，Nginx 第1步：开启以下PHP扩展并修改php.ini和mysql.ini的配置参数. php.ini ext-bcmath ext-ctype
Windows上安装Magento2.4+
wustzdd的博客
08-18 2271
Magento 2的系统要求 PHP- PHP 7.3+ 数据库-MySQL 5.7+ Elasticsearch7.6+ Web服务器-Apache 2.4x或Nginx 1.8x 操作系统-跨平台 浏览器-Google Chrome，Internet Explorer或Firefox等 安全套接字层（SSL）-HTTPS的有效安全证书 第1步：开启以下PHP扩展并修改php.ini和mysql.ini的配置参数. php.ini ext-bcmath ext-ctype ext-
livereload（自动刷新）
Joan_yang的博客
03-26 5959
安装node    1：换镜像（淘宝）原生npm安装太慢了npm install cnpm -g --registry=https://registry.npm.taobao.org 2：检查版本命令 （cnpm-v） 3：安装livereload （--global 表示全局环境安装）（--save-dev 表示局部文件）cnpm install livereload --global 4：执行...
Magento2开发者全面指南：环境配置与编程概念
"Magento2开发者指南提供了详尽的Magento2平台架构理解、环境管理以及编程概念与惯例的指导，旨在帮助开发者高效地进行Magento2的开发工作。" 在《Magento2 Developer's Guide》这本书中，作者深入浅出地介绍了...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值