Bower,Gulp学习笔记

前提条件

node、 bower、 git、 gulp

安装

node：
git： 安装完之后还需要设置环境变量，这个就不详细说了，自行搞定
gulp： gulp基于node.js,前面我们已经安装好了node,现在就可以用npm通过命令行来安装gulp。先是全局安装，在npm上敲这行命令：npm install gulp -g，-g就是global的缩写，输入命令：gulp -v 可以查看你当前使用的版本，出现版本号也说明安装成功了。全局安装完了，还要在你的项目上安装：npm install gulp --save-dev
bower： 同样是使用npm：npm install bower –g 检查版本：bower –v
到这里，我们需要的工具就安装完，可以告一段落了。下面开始这些工具的使用。

Bower

使用之前还是先简单地介绍一下bower。bower是用于管理前端依赖的包管理器，上有一段话是这么介绍它的功能的：Bower can manage components that contain HTML,CSS,JavaScript,fonts or even image files. Bower doesn’t concatenate or minify code or do anything else - it just installs the right versions of the packages you need and their dependencies. 翻译过来就是说bower只是安装你所需要的包和依赖。例如你要在一个html中引用jquery文件，不需要去网上搜索下载，直接通过bower就可以安装jquery。那么bower是怎么安装包和依赖的呢？
首先你需要配置名为bower.json的文件，可以使用命令bower init回答问题后生成或者手动创建添加内容。bower.json存放在项目的根目录下，它保存的内容是项目的库信息。
现在来安装jquery和bootstrap依赖，刚才安装的git这里就用上了。在项目根目录上打开git bash，输入命令：

    bower install jquery  
    bower install bootstrap

这样jquery和bootstrap文件就会被下载到项目自动生成的bower_components文件夹下了。当然，如果你不想把它存在bower_components下的话，可以创建.bowerrc文件，设置directory属性，例如：{directory:"name"}注意：.bowerrc和bower.json是在同一级目录下的。
包的安装方式有多种（来源于）：

    # installs the project dependencies listed in bower.json
    $ bower install
     # registered package
     $ bower install jquery
     # GitHub shorthand
     $ bower install desandro/masonry
     # Git endpoint
     $ bower install git://github.com/user/package.git
     # URL
     $ bower install http://example.com/script.js 

安装好了包之后，就可以使用你需要的文件了：

       htmlBuilder = require("gulp-html-builder");   
       gulp.task("replace",function(){
       gulp.src("public/index.html")
          .pipe(htmlBuilder({
             baseDir:"dist",//执行完后的根目录
             cssDir:"css",//相对于baseDir的css目录，存放执行完的css
             jsDir:"js",//相对于baseDir的js目录，存放执行完的js
             filterPath:"dist/"  //对执行后写入的路径进行过滤，让压缩合成后的文件相对于编译后的html目录查找
         })).pipe(gulp.dest("dist"));
       });

启动http-server

     var gulp = require("gulp"),connect = require("gulp-connect");
     gulp.task("http-server",function(){
        connect.server();
     });'

输入命令gulp http-server之后就可以访问localhost:8080了

检测代码修改自动执行任务
gulp.watch(glob,tasks)可以监视文件，当文件有什么变化时，会自动执行任务

     gulp.task("auto",function(){
        gulp.watch("**/css/*.css",["css"]);
        gulp.watch("**/js/*.js",["js"]);
        gulp.watch("**/images/*.*",["images"]);
        gulp.watch("index.html",["replace"]);
     });

题外话

由于本人也是第一次接触gulp,所以文章或有错误，还请大牛指出。
另外，这是我第一次使用segmentfault的MarkDown，很不称手，排版有些问题 =_=,见谅。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!