前端自动化构建工具 gulp 学习笔记 一、

一、我对gulp的初期理解

是一种前端辅助开发工具 可以帮你把js，css，img等文件 合并、压缩,图片好像是合并为精灵图，合并为精灵图之后，还会生成一个css样式表。

官方解说是：基于流的自动化构建工具。

基于流：应该就是他的语法方式有点像jquery 那样 如： $(".active").css("background":"red").addClass("default");像这样一直点点下去。前一个表达式的输出作为后一个表达式的输入，好像说是叫管道什么的。

自动化：也就是他可以监听你某些文件的变化而做出相应 也就是执行某些任务，比如：你编辑好了一个css文件，保存时，它可以自动的将你这个文件去执行压缩，合并然后另存一份压缩后的文件，还要就是 他可以监听你的文件变化，自动的刷新浏览器页面，也就是比如你设置一个样式，你不用去刷新浏览器，只要保存一下，浏览器就自动跟着刷新了。

这就是目前我对他的了解和尝试。

二、得到gulp

这个首先得知道nodejs,和npm,之前我一直听说nodejs我还以为是个.js文件需要引入的，结果他居然是个环境，就是让js脱离浏览器执行的环境，安装到电脑上后那些基于nodejs的工具之类的才能使用。

而npm呢是个管理器，有点像个下载安装工具，只要你安装好了nodejs那么在控制台用命令npm ** 就算是使用了 如npm install gulp -g这种，全局安装gulp，那么他就会下载安装gulp，就像迅雷之类的，只是他主要是用来管理一些工具包。

具体可以参照 https://blog.csdn.net/momoda111/article/details/76590701 我是从这里开始了解的。

其实这里还牵扯到了commonjs, commonjs其实是中代码模块化开发规范。方法require（“**.js”） module.export等就是他的特点。但是用commonjs规范写的代码浏览器不认，因为浏览器没有require这类方法

所以又牵扯出一个 工具broserify，这个工具是把 按照commonjs规范写的代码，编码一下，变成浏览器可以识别的普通js代码。

gulp的使用主要是依赖各种插件，如压缩css的插件等，要用某个插件需要去下载并在gulpfile.js中引用。

以下是插件学习笔记：

免刷新浏览器实现实时更新页面

无论修改了html，还是css 或者js文件，无需刷新，只要一保存那么页面就更新。

1.首先需要插件 gulp-connect 的支持

var connect = require("gulp-connect");

2.启动一个服务器（放到一个任务中）

gulp.task("server",function(){

　　connect.server({

　　root:"./app/"     //指定服务器的项目目录 这样服务器启动后就可以直接访问到该目录下的页面

　　livereload:true    //是否支持实时刷新页面

　　port:8888     //指定一个端口   可以开启多个服务器 只要指定不同的端口即可

　　});

});

3.指定需要自动刷新的文件（放到一个任务中）

如：gulp.task("html",function(){

　　gulp.src(“.app/css/*.css”).pipe(connect.reload());// 关键在于 connect.reload() 只要在流的最后加上这个就表示刷新页面  即重新加载connect中的项目

});

4.监听需要修改后触发任务的文件

gulp.task("watch",function(){

　　gulp.watch(path.app + "**/*.html",['html']);

});

5.做一个一次性启动整个任务的 入口任务。

gulp.task("default",["server","watch"]);

以上的流程解释为：监听  path.app + "**/*.html" 如果其发生变化 则执行任务 ‘html’,而任务html中指定服务器重新载入。

至此 一个简单的 实时更新页面的工具就做好了。

源码：

var gulp = require("gulp");
var connect = require("gulp-connect");
var path = {
    app:"./app/"
};
gulp.task("css",function(){
    gulp.src(path.app + "css/*.css").pipe(connect.reload());
});
gulp.task("js",function(){
    gulp.src(path.app + "js/*.js").pipe(connect.reload());
});
gulp.task("html",function(){
    gulp.src(path.app + "**/*.html").pipe(connect.reload());
});
gulp.task("server",function(){

    //启动服务器
    connect.server({
        root:path.app,
        livereload:true,
        port:8888
    });
    //使用默认浏览器打开路径下的网页 即打开 root指定的网页
});
gulp.task("watch",function(){
    gulp.watch(path.app + "**/*.html",['html']);
    gulp.watch(path.app + "**/*.js",['js']);
    gulp.watch(path.app + "**/*.css",['css']);
});
gulp.task("default",["server","watch"]);

如果你想任务执行时自动启动浏览器打开页面 在任务server中使用 open("http://localhost:8888"); 这个open也是个插件需要引入。