Home > Article > Backend Development > How Laravel uses gulp to build front-end resources
Gulp is an automation tool that front-end developers can use to handle common tasks. The following article mainly introduces you to relevant information on how Laravel uses gulp to build front-end resources. The article introduces it in detail through example code. Friends in need can refer to it. Let’s take a look below.
What is gulp?
gulp is a new generation of front-end project building tool. You can use gulp and its plug-ins to compile your project code (less, sass) and compress your js and css code, and even compressing your images, gulp has only a small API, so it is very easy to learn. Gulp uses the stream method to process content. Node has spawned a number of automation tools, such as Bower, Yeoman, Grunt, etc.
The similarities and differences between gulp and grunt
Easy to use: Adopting a code-over-configuration strategy, Gulp makes simple things simple and complex Tasks become manageable.
Efficient: By taking advantage of Node.js's powerful streams, there is no need to write intermediate files to disk, and the build can be completed faster.
High Quality: Gulp’s strict plugin guidelines ensure plugins are simple and work the way you expect.
Easy to learn: By keeping the API to a minimum, you can learn Gulp in a short time. The build works just like you imagine: a series of streaming pipes.
Introduction
Recently, I have further standardized the front-end code of my homepage. I use npm to introduce some front-end resource libraries and use gulp in Laravel 5.5. Encountered some pitfalls.
mix.sass cannot be used directly in the node_modules folder. You can only use the resource/assets/sass/app.scss file to generate css, and then merge it with other css into one file.
mix.scripts can use the js in the node_modules folder and merge it with your own js into one file.
mix.copy can copy files in node_modules to the specified directory, such as fonts.
mix.version can add a version number to the merged file.
Posted my final configuration as follows:
elixir(function (mix) { mix.sass([ 'app.scss' ], 'public/css') .styles([ './public/css/app.css', 'style.css', 'pill.css', ], 'public/css/site.css') .styles([ './public/css/app.css', 'cover.css', ], 'public/css/cover.css') .scripts([ './node_modules/jquery/dist/jquery.min.js', './node_modules/bootstrap-sass/assets/javascripts/bootstrap.min.js', 'scrollerup.js' ],'public/js/app.js') .copy([ './node_modules/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.woff', './node_modules/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.woff2' ], 'public/build/fonts/bootstrap') .version([ 'public/css/cover.css', 'public/css/site.css' ]); });
The above code is from mine gulpfile.js file.
Run the gulp command and run gulp –production online.
The above is the entire content of this article. I hope it will be helpful to everyone’s learning. More Please pay attention to the PHP Chinese website for related content!
Related recommendations:
About the PHP framework Laravel plug-in Pagination method to implement custom paging
The above is the detailed content of How Laravel uses gulp to build front-end resources. For more information, please follow other related articles on the PHP Chinese website!