Node-Gulp模块篇

1. Gulp 是什么

1. Gulp 是第三方模块
2. Gulp 是基于node平台开发的前端构建工具，将机械化操作编写成任务，想要执行机械化操作时，执行一个命令行命令
   任务就能自动执行了
3. 实际上就是用机器替代手工，提高开发效率

2. Gulp 能做什么

1. 项目上线时，将 HTML、CSS、JS文件压缩合并
2. 语法转换(es6、less…)
3. 公共文件抽离
4. 修改文件浏览器自动刷新

3. Gulp 的使用

1. 下载：

    npm install gulp
   // gulp为库文件，把命令行路径切换至当前项目路径，gulp下载到当前项目文件夹的根目录中
   

2. 在项目的根目录下建立：gulpfile.js文件

3. 重构项目的文件夹结构，在项目的根目录中新建两个文件夹：
   src目录放置源代码文件
   dist目录放置构建后文件

4. 在gulpfile.js文件中编写任务：

   //1.获取gulp模块对象： 
    const gulp = require("gulp")     
   //2.使用gulp.task()方法建立任务：
    gulp.task("任务名字", (node)=>{
        //3.获取要处理的文件：
         gulp.src("路径") 
        //4.处理问价及将处理后的文件输出到dist目录中：
         .pipe(gulp.dest("./dist/css"))
        // 注：.pipe是连在gulp.src()后面的 node()
    })             
   //5. 在命令行工具中执行gulp任务
   	 npm install gulp-cli -g  //下载执行命令的工具  
   	 gulp 任务名字       //执行命令
   

4. Gulp中提供的方法

1. 建立gulp任务：

   gulp.task("name", callback)
   // 第一个参数:任务的名字
   // 第二个参数：回调函数
   

2. 获取任务要处理的文件，需要文件名：

   gulp.src("路径")
   // *代替文件名表示选中所有的
   // []也可以以数组的方式传入多个路径文件
   

3. 处理文件：

   .pipe(函数)
   gulp.dest("路径") // 输出文件至哪个文件夹，不需要文件名
   

4. 监控文件变化：

   gulp.watch()
   

5. Gulp 中提供的插件

1. html文件压缩：gulp-htmlmin
2. 压缩css：gulp-csso
3. javaScript语法转化ES6-ES5：gulp-babel
4. less语法转化-css：gulp-less
5. 压缩混淆javaScript：gulp-uglify
6. 公共文件包括,抽取公共代码：gulp-file-include
7. 浏览器实时同步：browsersyuc
8. 插件使用步骤：下载、引用、调用

    // 例如：下载：
    npm install gulp-htmlmin
    // 引用：
    const htmlmin = require("gulp-htmlmin")
   

6. 抽取html的公共代码

1. 新建一个文件夹common存放公共代码文件

2. 在common文件夹中新建一个html文件con

3. 把项目中html文件的公共代码抽取出来，放入common的公共文件夹的con文件中

4. 然后在被抽取代码的html文件被抽取代码的位置引入代码：

   @@include('./common/con.html')
   

5. 在gulpfile.js中使用gulp-file-include插件就可以了

7. 构建任务

1. 当有多个任务的时候，可以把它们构建成一个任务，这样就不用了去命令行工具一个一个输入任务了
2. gulpfile.js中写入：

   gulp.task("default",["htmlmin","cssmin","jsmin"])
   

3. 然后在命令行工具中输入： gulp default 就可以了，或者直接写 gulp 也可以的