用Laravel+Grunt+Bower管理你的应用

时间 2019-11-17

标签 laravel+grunt+bower laravel grunt bower 管理应用栏目 Node.js 繁體版

原文原文链接

来源：http://yansu.org/2014/03/10/grunt-bower-and-laravel.htmljavascript

为何这么选择？

现在开源盛行，从后端的各个类库，到现在前端的jQuery插件，前端框架等，愈来愈多优秀的组件能够被咱们选择应用在现有的项目中。随着开源组件的更新迭代，它们互相之间的依赖也愈来愈复杂。旧的框架对于新的变化老是显得难以适从，就算为了新的特性改变旧的框架，也会显的略显牵强。因而就会有新的框架和工具，在这个时候凸现出来。php

每一个项目开始的方向是很重要的，良好的开始能够避免以后的各类问题。下面要说的三个工具，就是现有应用开发的一个良好开端。css

Laravel

Laravel是一个很是新的PHP框架，借鉴了不少前辈的优秀特性，以PHP5为起点，引入了Composer做为包管理工具，号称为WEB艺术家创造的PHP框架。html

Grunt

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

Bower

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

优点

使用Laravel能够更好的利用最新版PHP的优点，排除了一些历史问题。
利用Composer能够极大减小”轮子”的数量，优秀的包能够去Packagist找到，这些包几乎都利用Github来托管，利用Github的issue和request能够辅助提升包的质量。
Bower能够帮助统一管理开源前端库，如Bootstrap和jQuery等，一样这些包也在Github上托管。
Grunt帮助粘合先后端的开源组件，将合并编译压缩等工做自动化。

安装使用

前提

有些须要提早安装的组件这里不在赘述，请自行Google。node

Composer
Node & npm
Grunt
Bower

Laravel

有了Composer后安装一个Laravel项目很是容易jquery

composer create-project laravel/laravel myproject

安装完成后在myproject目录下就生成了laravel的框架结构，入口文件在public中。在myproject根目录下，有一个composer.json文件，这个文件看起来是这样的：laravel

{
    "name": "laravel/laravel",
    "description": "The Laravel Framework.",
    "keywords": ["framework", "laravel"],
    "license": "MIT",
    "require": {
        "laravel/framework": "4.1.*"
    },
    //...
}

这个文件能够控制项目的一些依赖关系，咱们须要一些组件的时候直接在require下添加便可，composer会帮咱们去查找这个组件所需的依赖包。git

接着为了安装前端框架，咱们先来建立几个公共目录，在public下，建立相似的目录

.
|-- assets
|   |-- css
|   |-- fonts
|   `-- js
|-- favicon.ico
|-- index.php
|-- packages
`-- robots.txt

这里只有assets目录是我新建立的

Bower

准备好后端框架之后，能够安装前端框架了，例如Bootstrap。利用Bower安装的前端库是其整个工程，并非咱们须要的个别文件，因此能够讲它们先放在一个位置，以后利用Grunt来统一处理。

首先配置一下安装路径，在myproject根目录下配置文件.bowerrc为

{
  "directory": "public/assets/bower"
}

这个文件告诉bower，将下载的包都安装到public/assets/bower下。

接着在根目录建立一个bower的配置文件bower.json为

{
  "name": "myproject"
}

接着添加前端库

bower install bootstrap -S

这个命令将会利用配置文件管理整个库依赖，这个时候再看一下配置文件，bower已经帮助咱们自动安装好了Bootstrap依赖的包–jQuery，同时修改了配置文件

{
  "name": "myproject",
  "dependencies": {
    "bootstrap": "~3.1.1"
  }
}

在看一下目标目录，public/assets下，生成了一个bower目录，其中包含了Bootstrap和jQuery。

Grunt

根据上面的步骤，咱们很方便的创建了后端框架和前端框架，可是前端框架在使用的时候直接用bower下的文件并非很是方便，并且还可能会涉及到一些库的合并压缩等步骤。这些问题均可以交给Grunt去作.

首先在myproject根目录下利用npm 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的插件，帮助咱们更好的完成所需功能。

npm install grunt --save-dev
npm install grunt-contrib-concat --save-dev
npm install grunt-contrib-less --save-dev
npm install grunt-contrib-uglify --save-dev
npm install grunt-contrib-watch --save-dev
npm install grunt-contrib-copy --save-dev
npm install grunt-contrib-cssmin --save-dev

这里的每一个插件我会在下面的配置中介绍。上面命令中的--save-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"
  }
}

注意在安装后有了一个node_modules目录，这个是node项目依赖包的位置，咱们通常都在本地进行文件的合并和压缩，因此能够将这个包保留在本地。另外对于bower生成的目录，在Grunt处理过之后也是能够不上传到正式环境中的。因此修改.gitignore文件，将这两个文件夹排除出去：

/bootstrap/compiled.php
/vendor
composer.phar
composer.lock
.env.local.php
.env.php
.DS_Store
Thumbs.db
/public/assets/bower
/node_modules

接下来就要进行Grunt的配置项编写了，我会在配置中加入注释帮助理解。还记得咱们刚刚创建的package.json配置文件中的入口文件吗？这个文件还不存在，因此咱们须要手动创建，在myproject下建立Gruntfile.js的文件，内容以下：

module.exports = function(grunt) {
  //配置项
  grunt.initConfig({
    //concat插件配置，用来合并多个文件
    concat: {
      //文件间的分隔符
      options: {
        separator: ';',
      },
      //app是一个任务名，能够随意命名
      app: {
        //将进行的合并项
        src: [
          './public/assets/bower/jquery/dist/jquery.js',
          './public/assets/bower/bootstrap/dist/js/bootstrap.js',
        ],
        //合并后放置在
        dest: './public/assets/js/javascript.js',
      },
    },
    //css合并压缩
    cssmin: {
      //任务名
      app: {
        src: [
          './public/assets/bower/bootstrap/dist/css/bootstrap.css',
          './public/assets/css/base.css'
        ],
        dest: './public/assets/css/stylesheet.css'
      }
    },
    //js压缩
    uglify: {
      options: {
        mangle: false //是否混合变量，若是需求的话置为true
      },
      app: {
        files: {
          './public/assets/js/javascript.js': './public/assets/js/javascript.js',
        }
      },
    },
    //移动文件
    copy: {
      app: {
        files: [
          {
            expand: true,
            flatten: true,
            cwd: './public/assets/bower/bootstrap/fonts/',
            src: ['**'], 
            dest: './public/assets/fonts/', 
            filter: 'isFile'
          },
        ]
      }
    },
    //监听文件变化，若是文件变化，将从新进行任务
    watch: {
      app: {
        files: [
          './public/assets/bower/jquery/dist/jquery.js',
          './public/assets/bower/bootstrap/dist/js/bootstrap.js',
          './public/assets/bower/bootstrap/dist/css/bootstrap.css',
        ],   
        //文件变化后执行哪些任务
        tasks: ['concat:app','uglify:app','cssmin:app','copy:app'],
        options: {
          livereload: true
        }
      },
    }
  });

  //导入所需的插件
  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-less');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-copy');
  grunt.loadNpmTasks('grunt-contrib-cssmin');

  //注册两个任务
  grunt.registerTask('watch', ['watch']);
  grunt.registerTask('default', ['concat:app','uglify:app','cssmin:app','copy:app']);
};

咱们看到，最后注册了两个任务，这两个任务能够从终端中执行，例如：

grunt watch

能够开启文件监听，当文件变化时执行watch中设定的任务。

若是直接执行grunt，则会执行default中设定的任务。咱们也能够具体指定执行某一单一任务，如

grunt copy:app

上面则只将bootstrap/fonts中的文件拷贝到public/assets/fonts中。

对于上述的这些插件，能够在这里找到，也有详细的用法。

总结

每一个人都有本身的喜爱，个人这种配置可能只抛个砖，但愿有更好的方式分享。最后在总结一下这三剑客：

Laravel利用了最新PHP特性，引入了Composer包管理，解决后端库之间的依赖
Bower帮助安装和解决前端框架和库的依赖关系
Grunt帮助粘合先后端的开源组件，而且完成合并和压缩等重复性工做。

下面两篇参考文章各有特点，若是但愿了解一下能够点击连接去看。

我在Github上创建了这篇博客中所讲的目录结构，想要快速创建一个可以使用的工程，只须要如下几部：

git clone https://github.com/suyan/Laravel-Bower-Grunt.git
composer install
bower update
npm install
grunt

Enjoy it!