gulp - 无法使用 Gulp 编译资产
问题描述
我发现的每个教程或文档都说我应该这样做:
var elixir = require('laravel-elixir');
elixir.config.assetsPath = 'themes/ei/assets/src';
elixir.config.publicPath = 'themes/ei/assets/'
elixir(function(mix) {
mix.sass('style.scss');
mix.scripts('main.js');
});
但是当我从命令行运行时gulp
,我得到:
AssertionError [ERR_ASSERTION]: Task function must be specified
at Gulp.set [as _setTask] (/home/andrew/Development/eiweb/node_modules/undertaker/lib/set-task.js:10:3)
at Gulp.task (/home/andrew/Development/eiweb/node_modules/undertaker/lib/task.js:13:8)
at Object.<anonymous> (/home/andrew/Development/eiweb/node_modules/laravel-elixir/dist/tasks/recipes/default.js:30:6)
at Module._compile (internal/modules/cjs/loader.js:816:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:827:10)
at Module.load (internal/modules/cjs/loader.js:685:32)
at Function.Module._load (internal/modules/cjs/loader.js:620:12)
at Module.require (internal/modules/cjs/loader.js:723:19)
at require (internal/modules/cjs/helpers.js:14:16)
at requireDir (/home/andrew/Development/eiweb/node_modules/require-dir/index.js:123:33)
我的package.json
文件包括:
"dependencies": {
"gulp": "^4.0.2",
"laravel-elixir": "^6.0.0-18"
}
...我已经gulp-cli
安装了全局。
我错过了什么?
解决方案
出现此问题是因为版本问题gulp 4
具有不同的签名task
并laravel-elixir
使用旧签名,gulp 3
因此会导致错误。
最好的情况是移动 https://laravel-mix.com作为其基础,webpack
以便支持更多功能。语法也laravel-mix
相似,所以它的优点。
对于 laravel-mix ,在根目录下创建这个 pacjage
package.json
文件。或来自 [ https://github.com/laravel/laravel ] 公共回购的最新用户。
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"axios": "^0.18",
"bootstrap": "^4.1.0",
"cross-env": "^5.1",
"jquery": "^3.2",
"laravel-mix": "^4.0.7",
"lodash": "^4.17.5",
"popper.js": "^1.12",
"resolve-url-loader": "^2.3.1",
"sass": "^1.15.2",
"sass-loader": "^7.1.0",
"vue": "^2.5.17",
"vue-template-compiler": "^2.6.10"
}
}
webpack.mix.js
在你的根目录下创建
const mix = require('laravel-mix');
// change theme path according to your need.
const themePath = 'themes/rainlab-bonjour';
mix.options({
publicPath: themePath + '/assets/compiled/'
})
// change script name and path according to your need.
mix.js(themePath + '/assets/src/main.js', 'main.js')
.sass(themePath + '/assets/src/main.scss', 'main.css');
命令 [您可以将此命令与 yarn 或 npm 一起使用(我正在使用 yarn)],您可以在此处阅读更多信息。[ https://laravel-mix.com/docs/4.0/workflow ]
yarn watch -> 它将监视文件并编译文件,然后在
publicPath
目录中生成编译输出。在我们的案例中,文件将是。
themes/rainlab-bonjour/assets/compiled/main.js
themes/rainlab-bonjour/assets/compiled/main.css
现在您可以使用
'assets/compiled/main.js'|theme
OctoberCms 过滤器将它们包含在主题中。
如果您有任何疑问,请发表评论。
推荐阅读
- c - 为什么C中的这个字符串交换函数不交换字符串?
- firebase - 将文档数据检索到一个列表中,其中 documentID 与 currentUser().uid 相同 - Flutter
- r - R数据框转换:将字符观察拆分为多行,重新排列字符串
- kotlin - 如何在 Kotlin 中生成 MD5 哈希?
- rocksdb - 无法在 ubuntu 中编译 Rocksdb java,出现找不到 jni.h 文件的致命错误
- visual-studio-code - VS Code 在新选项卡热键中打开文件
- asp.net-core - 具有 Windows 身份验证的用户角色在 ASP.NET Core 中不起作用
- vue.js - Vuetify v-calendar:动态每日间隔在 Safari 上不起作用
- stripe-payments - 使用 Stripe ACH 将资金转入和转出 Plaid Sandbox 银行账户
- r - [.data.table 中的错误:我已评估为闭包类型。期望逻辑、整数或双精度。在 R