大佬教程收集整理的这篇文章主要介绍了Grunt+Bower+Yarn管理前端资源，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
基于JavaScript的自动化构建工具，可以将重复的任务，例如压缩（minification），编译，单元测试，linTing等自动化。
Web前端开发的包管理工具，解决前端框架间的依赖关系，方便模块化和重用。
nodejs的包管理工具用于替换npm。
有些需要提前安装的组件这里不在赘述，请自行Google。
准备好后端框架以后，可以安装前端框架了，例如Bootstrap。利用Bower安装的前端库是其整个工程，并不是我们需要的个别文件，所以可以讲它们先放在一个位置，之后利用Grunt来统一处理。
首先配置一下安装路径，在@H_453_45@myproject根目录下配置文件.bowerrc为
这个文件告诉bower，将下载的包都安装到resources/assets/bower下。
接着在根目录创建一个bower的配置文件bower.json
运行接着添加前端库
bower init bower install bootstrap -S
这个命令将会利用配置文件管理整个库依赖，这个时候再看一下配置文件，bower已经帮助我们自动安装好了Bootstrap依赖的包--jQuery，同时修改了配置文件
在看一下目标目录，resources/assets下，生成了一个bower目录，其中包含了Bootstrap和jQuery。
根据上面的步骤，我们很方便的建立了后端框架和前端框架，但是前端框架在使用的时候直接用bower下的文件并不是非常方便，而且还可能会涉及到一些库的合并压缩等步骤。这些问题都可以交给Grunt去做.
首先在@H_453_45@myproject根目录下利用yarn init初始化一个配置文件（laravel 5.5初始化后会创建一个）。
yarn init
根据提示一步一步填写即可，最后生成的配置文件package.json应该如下所示：
{ "name": "myproject","version": "0.0.1","description": "","main": "Gruntfile.js","scripts": { "test": "echo \"Error: no test specified\" && exit 1" },"author": "","license": "ISC" }
接着我们要安装一些Grunt的插件，帮助我们更好的完成所需功能。
yarn global add grunt-cli yarn add grunt --dev yarn add grunt-contrib-concat --dev yarn add grunt-contrib-less --dev yarn add grunt-contrib-uglify --dev yarn add grunt-contrib-watch --dev yarn add grunt-contrib-copy --dev yarn add grunt-contrib-cssmin --dev
这里的每个插件我会在下面的配置中介绍。上面命令中的--dev选项的作用是将安装的这些包放入配置文件依赖项中，方便以后安装。下面是安装后的配置文件：
{ "name": "myproject","license": "ISC","devDependencies": { "grunt": "~0.4.3","grunt-contrib-concat": "~0.3.0","grunt-contrib-less": "~0.10.0","grunt-contrib-uglify": "~0.4.0","grunt-contrib-watch": "~0.5.3","grunt-contrib-cssmin": "~0.9.0" "grunt-contrib-copy": "~0.5.0" } }
接下来就要进行Grunt的配置项编写了，我会在配置中加入注释帮助理解。还记得我们刚刚建立的package.json配置文件中的入口文件吗？这个文件还不存在，所以我们需要手动建立，在@H_453_45@myproject下创建Gruntfile.js的文件，内容如下：
1 module.exports = function(grunt) { 2 //配置项 3 grunt.initConfig({ 4 //concat插件配置，用来合并多个文件 5 concat: { 6 //文件间的分隔符 7 options: { 8 separator: ‘;‘, 9 },10 //app是一个任务名，可以随意命名 11 app: { 12 //将进行的合并项 13 src: [ 14 ‘./public/assets/bower/jquery/dist/jquery.js‘,15 ‘./public/assets/bower/bootstrap/dist/js/bootstrap.js‘,16 ],17 //合并后放置在 18 dest: ‘./public/assets/js/javascript.js‘,19 },20 },21 //css合并压缩 22 cssmin: { 23 //任务名 24 app: { 25 src: [ 26 ‘./public/assets/bower/bootstrap/dist/css/bootstrap.css‘,27 ‘./public/assets/css/base.css‘ 28 ],29 dest: ‘./public/assets/css/stylesheet.css‘ 30 } 31 },32 //js压缩 33 uglify: { 34 options: { 35 mangle: false //是否混合变量，如果需求的话置为true 36 },37 app: { 38 files: { 39 ‘./public/assets/js/javascript.js‘: ‘./public/assets/js/javascript.js‘,40 } 41 },42 },43 //移动文件 44 copy: { 45 app: { 46 files: [ 47 { 48 expand: true,49 flatten: true,50 cwd: ‘./public/assets/bower/bootstrap/fonts/‘,51 src: [‘**‘],52 dest: ‘./public/assets/fonts/‘,53 filter: ‘isFile‘ 54 },55 ] 56 } 57 },58 //监听文件变化，如果文件变化，将重新进行任务 59 watch: { 60 app: { 61 files: [ 62 ‘./public/assets/bower/jquery/dist/jquery.js‘,63 ‘./public/assets/bower/bootstrap/dist/js/bootstrap.js‘,64 ‘./public/assets/bower/bootstrap/dist/css/bootstrap.css‘,65 ],66 //文件变化后执行哪些任务 67 tasks: [‘concat:app‘,‘uglify:app‘,‘cssmin:app‘,‘copy:app‘],68 options: { 69 livereload: true 70 } 71 },72 } 73 }); 74 75 //导入所需的插件 76 grunt.loadNpmTasks(‘grunt-contrib-concat‘); 77 grunt.loadNpmTasks(‘grunt-contrib-watch‘); 78 grunt.loadNpmTasks(‘grunt-contrib-less‘); 79 grunt.loadNpmTasks(‘grunt-contrib-uglify‘); 80 grunt.loadNpmTasks(‘grunt-contrib-copy‘); 81 grunt.loadNpmTasks(‘grunt-contrib-cssmin‘); 82 83 //注册两个任务 84 grunt.registerTask(‘watch‘,[‘watch‘]); 85 grunt.registerTask(‘default‘,[‘concat:app‘,‘copy:app‘]); 86 };
我们看到，最后注册了两个任务，这两个任务可以从终端中执行，例如：
grunt watch
如果直接执行grunt，则会执行default中设定的任务。我们也可以具体指定执行某一单一任务，如
grunt copy:app
上面则只将bootstrap/fonts中的文件拷贝到public/assets/fonts中。
以上是大佬教程为你收集整理的Grunt+Bower+Yarn管理前端资源全部内容，希望文章能够帮你解决Grunt+Bower+Yarn管理前端资源所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。