Grunt+Bower+Yarn管理前端资源

Grunt

基于JavaScript的自动化构建工具，可以将重复的任务，例如压缩（minification），编译，单元测试，linting等自动化。

Bower

Web前端开发的包管理工具，解决前端框架间的依赖关系，方便模块化和重用。

Yarn

nodejs的包管理工具用于替换npm。

优势

  1. Bower可以帮助统一管理开源前端库，如Bootstrap和jQuery等，同样这些包也在Github上托管。
  2. Grunt帮助粘合前后端的开源组件，将合并编译压缩等工作自动化。
  3. 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管理你的应用 

posted @ 2018-08-24 19:14  不骑乌骓  阅读(683)  评论(0)  编辑  收藏  举报