zoukankan      html  css  js  c++  java
  • Bower和Gulp集成前端资源

    在我们开始前先介绍下流程:

    1. 安装node.js。
    2. 安装npm。
    3. 全局安装bower。
    4. 根目录创建 .bowerrc (可选)
    5. 在项目中安装bower 并创建 bower.json 文件,运行 bower命令将需要的包安装,然后检查 bower.json
    6. 编辑 gulpfile.js 文件 将任务写入。
    7. 在 resources/assets 目录下创建一个.less文件 以待编译使用。
    8. 先运行 gulp copyfiles 命令将文件复制到对应的路径下,然后运行 gulp 进行编译 合并等任务。

     1 Bower是什么?

    bower是一个包管理工具 只不过它面向前端。

     1.1 安装

     1.1.1 安装node.js

    在我们安装Bower前应该先安装node.js,因为安装Bower我们需要用到npm,首先先看看我们是否安装了npm:

    npm --version

    如果没有输出版本号,那么可以到nodejs的官网去下载安装,或者通过 homebrew 安装,具体的Google一下 很全。

     1.1.2 安装Bower

    当安装了npm后可以通过npm全局安装Bower

    sudo npm install -g bower

     1.1.3 安装Gulp

    通过npm全局安装gulp

    sudo npm install -g gulp

     1.2 引入Bootstrap

     1.2.1 在项目根目录创建一个 .bowerrc 文件(可选)

    这是bower的一个步骤,目的是告诉Bower 下载的文件放到什么地方,我们创建并编辑bowerrc文件:

    {
      "directory": "vendor/bower_dl"
    }

     ↑ 这一步是可选的,如果没有指定路径的话 bower会自动在项目根目录创建一个bower_dl文件夹存放下载的文件,

     1.2.2 在项目本地安装Bower

    sudo npm install bower

     1.2.3 在项目根目录创建 bower.json 文件

     bower.json文件时管理依赖包的,它跟composer.json类似,我们编辑它的内容:

    {
      "name": "learn_project",
      "description": "Learn Laravel",
      "ignore": [
        "**/.*",
        "node_modules",
        "vendor/bower_dl",
        "test",
        "tests"
      ]

     1.2.4 开始引入前端文件

     上面的配置完成后我们就可以引入前端资源了:

    bower install jquery bootstrap --save

     完事儿之后看一眼 bower.json 是否添加了两个依赖:

    {
      "name": "learn_project",
      "description": "Learn Laravel",
      "ignore": [
        "**/.*",
        "node_modules",
        "vendor/bower_dl",
        "test",
        "tests"
      ],
      "dependencies": {
        "jquery": "^3.2.1",
        "bootstrap": "^3.3.7"
      }
    }

    的确添加了两个依赖 一个jQuery 一个bootstrap,然后运行bower update命令就可以下载到 /vendor/bower_dl 咯。


     2 Gulp

    Gulp是一个前端的工作流工具,它可以让你在开发中变得很轻松。接下来我们就会使用到Gulp。

     2.1 编写一个less文件

    我们先在 resource/asset/ 目录下创建一个 .less 文件,文件名随你命名,然后编辑此文件如下:

    @import "bootstrap/bootstrap";
    @import "//fonts.googleapis.com/css?family=Roboto:400,300";
    
    @btn-font-weight: 300;
    @font-family-sans-serif: "Roboto", Helvetica, Arial, sans-serif;
    
    body, label, .checkbox, label {
      font-weight: 300;
    }

    ↑ 在上面代码中 我们引入了bootstrap 但是它现在还没有引入到正确的路径中,我们下面就要使用Gulp将其拷贝到正确的位置。

     2.2 编辑gulpfile.js

    var gulp = require('gulp');
    var elixir = require('laravel-elixir');
    
    /*
     |--------------------------------------------------------------------------
     | Elixir Asset Management
     |--------------------------------------------------------------------------
     |
     | Elixir provides a clean, fluent API for defining some basic Gulp tasks
     | for your Laravel application. By default, we are compiling the Less
     | file for our application, as well as publishing vendor resources.
     |
     */
    
    /**
     * 拷贝所需要的文件
     */
    gulp.task("copyfiles", function(){
        // 拷贝jQuery到resources等待合并
        gulp.src("vendor/bower_dl/jquery/dist/jquery.js")
            .pipe(gulp.dest("resources/assets/js/"));
        // 拷贝bootstrap到resources,提供给layout.less引入。
        gulp.src("vendor/bower_dl/bootstrap/less/**")
            .pipe(gulp.dest("resources/assets/less/bootstrap"));
        // 拷贝bootstrap.js到resources等待合并
        gulp.src("vendor/bower_dl/bootstrap/dist/js/bootstrap.js")
            .pipe(gulp.dest("resources/assets/js/"));
        // 拷贝fonts到public
        gulp.src("vendor/bower_dl/bootstrap/dist/fonts/**")
            .pipe(gulp.dest("public/assets/fonts"));
    });
    
    
    elixir(function(mix) {
        // 合并js文件
        mix.scripts(['js/jquery.js', 'js/bootstrap.js'],
            // 合并到哪里
            'public/assets/js/app.js',
            // 从哪个路径搜索这些需要合并的文件
            'resources/assets'
        );
    
        // 编译less文件
        mix.less('layout.less','public/assets/css/layout.css');
    });

     2.3 运行Gulp

    我们先运行 gulp copyfiles 来将需要用到的文件拷贝到相应的路径下:

    gulp copyfiles

    然后运行 gulp 来进行合并和编译:

    gulp

    当两个命令都运行完 你就可以看看你的public目录和resources目录是不是有所变化。


     3 使用编译好的前端文件

    <!DOCTYPE html>
    <html>
    <head>
        <link rel="stylesheet" href="/assets/css/layout.css">
    </head>
    <body>
    <script src="/assets/js/app.js"></script>
    </body>
    </html>
  • 相关阅读:
    nginx的简介和配置文件实例(一)
    Tomcat基础配置(一)
    redis主从复制以及SSDB主主复制环境部署记录(四)
    redis主从原理介绍(三)
    redis介绍和安装和主从介绍(二)
    celery
    网络-sdn
    djang问题汇总
    django路由url
    django开发环境配置
  • 原文地址:https://www.cnblogs.com/sun-kang/p/7613181.html
Copyright © 2011-2022 走看看