详细说明Laravel如何使用Laravel构建前端资源

什么是大口？

grave是新一代前端项目构建工具。您可以使用grave及其插件来编译您的项目代码(less，sass)，压缩您的js和css代码，甚至压缩您的图片。grave只有几个API，所以非常容易学习。大口使用流来处理内容。Node催生了很多自动化工具，比如Bower、Yeoman、Grunt等等。

大口和咕噜的异同

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

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

高质量：glaw严格的插件指导方针确保插件简单，并如您所期望的那样工作。

易学：通过最小化API，可以在短时间内学会大口。建筑工程和你想象的一样：它是一系列的流动管道。

序

最近我们进一步规范了首页的前端代码，用npm引入了一些前端资源池，在Laravel 5.5中用have遇到了一些坑。

mix.sass不能直接使用node_modules文件夹中的文件，只能使用文件resource/assets/sass/app . SCS生成css，然后与其他css合并成一个文件。

Mix.scripts可以在node_modules文件夹中使用js，并将其与您自己的js合并到一个文件中。

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

Mix.version可以将版本号添加到合并文件中。

将我的最终配置发布如下：

酏(function(mix){ mix . sass([' app . SCS ']，' public/css ')。样式(['。/public/css/app.css '，' style.css '，' pill.css '，]，' public/css/site.css ')。样式(['。/public/css/app.css '，' cover.css '，]，' public/css/cover.css ')。脚本([')。/node _ modules/jquery/dist/jquery . min . js '，'。/node _ modules/bootstrap-sass/assets/JavaScript/bootstrap . min . js '，' scrollerup.js' ]，' public/js/app.js ')。复制(['。/node _ modules/bootstrap-sass/assets/font/bootstrap/glyphicon-半身人-regular.woff '，'。/node _ modules/bootstrap-sass/assets/font/bootstrap/glyphicon-half ins-regular . woff 2 ']，' public/build/font/bootstrap ')。版本([ 'public/css/cover.css '，' public/CSS/site . CSS '])；});上面的代码来自我的gulpfile.js文件。

运行大口命令并在线运行大口生产。

摘要

以上就是本文的全部内容。希望本文的内容对大家的学习或工作有一定的参考价值。有问题可以留言交流。谢谢你的支持。