Laravel Leveraging Gulp How to build front-end resources

This article mainly introduced about Laravel use gulp how to build front-end resources, has a certain reference value, now share to everyone, the need for friends can refer to

Gulp is an automated tool, the front-end developers can use it to handle common tasks, the following article mainly on the use of Laravel Gulp how to build front-end resources related Materials, the text through the sample code introduced in very detailed, the need for friends can refer to, let's see together

What is Gulp?

Gulp is a new generation of front-end project building tools, you can use Gulp and its plug-ins to compile your project code (LESS,SASS), you can compress your JS and CSS code, or even compress your pictures, gulp only a small number of APIs, so it is very easy to learn. Gulp uses stream to process content. Node spawned a number of automated tools, such as Bower,yeoman,grunt.

Similarities and differences of gulp and grunt

Easy to use: With code better than configuration strategies, Gulp keeps simple things simple and complex tasks manageable.

Efficient: Build can be done faster by leveraging node. JS's powerful stream, without writing intermediate files to disk.

High quality: Gulp Strict plug-in guidelines to ensure that the plug-in is simple and works the way you expect.

Easy to learn: by minimizing the API, you can learn to gulp in a very short period of time. The build work is the same as you would imagine: a series of flow pipelines.

Introduction

Recently, I have further standardized the front-end code of my home page, using NPM to introduce some front-end repositories, and use Gulp in Laravel 5.5 to encounter some pits.

Mix.sass can not directly use the Node_modules folder, can only use resource/assets/sass/app.scss this file to generate CSS, and then merge with other CSS into a file.

Mix.scripts can use JS in the Node_modules folder and merge it into a file with its own JS.

Mix.copy can copy the files in the node_modules to a specified directory, such as a font.

Mix.version can add a version number to the merged file.

Post 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 originates from my gulpfile.js file.

Run the Gulp command and run Gulp–production on the line.