Grunt
基于JavaScript的自动化构建工具,可以将重复的任务,例如压缩(minification),编译,单元测试,linting等自动化。
Bower
Web前端开发的包管理工具,解决前端框架间的依赖关系,方便模块化和重用。
Yarn
nodejs的包管理工具用于替换npm。
优势
- Bower可以帮助统一管理开源前端库,如Bootstrap和jQuery等,同样这些包也在Github上托管。
- Grunt帮助粘合前后端的开源组件,将合并编译压缩等工作自动化。
- Yarn用来替代npm进行包管理
安装使用
前提
有些需要提前安装的组件这里不在赘述,请自行Google。
- Node & yarn
- Grunt
- Bower
Bower
准备好后端框架以后,可以安装前端框架了,例如Bootstrap
。利用Bower
安装的前端库是其整个工程,并不是我们需要的个别文件,所以可以讲它们先放在一个位置,之后利用Grunt
来统一处理。
首先配置一下安装路径,在myproject
根目录下配置文件.bowerrc
为
1 { 2 "directory": "resources/assets/bower" 3 }
这个文件告诉bower,将下载的包都安装到resources/assets/bower
下。
接着在根目录创建一个bower
的配置文件bower.json
运行接着添加前端库
bower init bower install bootstrap -S
这个命令将会利用配置文件管理整个库依赖,这个时候再看一下配置文件,bower已经帮助我们自动安装好了Bootstrap
依赖的包--jQuery
,同时修改了配置文件
{ "name": "myproject", "dependencies": { "bootstrap": "^3.3.7" } }
在看一下目标目录,resources/assets
下,生成了一个bower目录,其中包含了Bootstrap
和jQuery
。
Grunt
根据上面的步骤,我们很方便的建立了后端框架和前端框架,但是前端框架在使用的时候直接用bower
下的文件并不是非常方便,而且还可能会涉及到一些库的合并压缩等步骤。这些问题都可以交给Grunt
去做.
首先在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", "version": "0.0.1", "description": "", "main": "Gruntfile.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "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
配置文件中的入口文件吗?这个文件还不存在,所以我们需要手动建立,在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','uglify:app','cssmin:app','copy:app']); 86 };
我们看到,最后注册了两个任务,这两个任务可以从终端中执行,例如:
grunt watch
可以开启文件监听,当文件变化时执行watch中设定的任务。
如果直接执行grunt
,则会执行default
中设定的任务。我们也可以具体指定执行某一单一任务,如
grunt copy:app
上面则只将bootstrap/fonts
中的文件拷贝到public/assets/fonts
中。
对于上述的这些插件,可以在这里找到,也有详细的用法。
文章来源(稍做修改):用Laravel+Grunt+Bower管理你的应用