Gulp

基于node平台开发的前端构建工具
将机械化操作编写成任务, 想要执行机械化操作时执行一个命令行命令任务就能自动执行了
用机器代替手工，提高开发效率。

Gulp能做什么

  • 项目上线，HTML、CSS、JS文件压缩合并
  • 语法转换（es6、less …）
  • 公共文件抽离
  • 修改文件浏览器自动刷新

Gulp使用

  • 使用npm install gulp下载gulp库文件
  • 在项目根目录下建立gulpfile.js文件
  • 重构项目的文件夹结构 src目录放置源代码文件 dist目录放置构建后文件
  • 在gulpfile.js文件中编写任务.
  • 在命令行工具中执行gulp任务

下载gulp命令

npm install gulp-cli -g

Gulp中提供的方法

  • gulp.src()：获取任务要处理的文件
  • gulp.dest()：输出文件
  • gulp.task()：建立gulp任务
  • gulp.watch()：监控文件的变化

Gulp插件

  • gulp-htmlmin ：html文件压缩
  • gulp-csso ：压缩css
  • gulp-babel ：JavaScript语法转化
  • gulp-less: less语法转化
  • gulp-uglify ：压缩混淆JavaScript
  • gulp-file-include 公共文件包含
  • browsersync 浏览器实时同步

把src下的base.css复制粘贴到dist/css里

1
2
3
4
5
6
7
8
9
10
11
12
//引用gulp模块
const gulp = require('gulp');
//使用gulp.task建立任务
//1.任务的名称
//2.任务的回调函数
gulp.task('first',()=>{//命名方法
    console.log('gulp任务执行成功');
    //使用gulp.src获取要处理的文件
    gulp.src('./src/css/base.css')
    .pipe(gulp.dest('dist/css'));
})

命令： gulp first

把html代码压缩

下载插件： npm install gulp-htmlmin

1
2
3
4
5
6
7
8
9
//引用gulp模块
const htmlmin = require('gulp-htmlmin');
//1.html文件中代码的压缩代码
gulp.task('htmlmin',()=>{//命名方法
    gulp.src('./src/*.html') //*.html 泛指所有的html文件
    .pipe(htmlmin({collapseWitespace:ture)); //压缩html代码
    .pipe(gulp.dest('dist'));//把src文件所有的html压缩到dist文件夹里
})

命令： gulp htmlmin

抽取html公共代码

下载插件： npm install gulp-file-include

1
2
3
4
5
6
7
8
9
10
11
12
//引用模块
const fileinclude = require('gulp-file-include');
//1.新建common 公共文件夹 新建比如header.html
//2.把html公共的文件夹放到common的html里
//3.在旧的html写上  @@include('./common/header.html')
//4.执行任务gulp htmlmin
gulp.task('htmlrecude',()=>{//命名方法
    gulp.src('./src/*.html') //*.html 泛指所有的html文件
    .pipe(fileinclude());
    .pipe(gulp.dest('dist'));//把src文件所有的html压缩到dist文件夹里
})

命令： gulp htmlrecude

css里less语法转换

下载插件： npm install gulp-less

1
2
3
4
5
6
7
const less = require('gulp-less');
gulp.task('lesszcss',()=>{//命名方法
    gulp.src('./src/css/*.less') //*.html 泛指所有的html文件
    .pipe(less());
    .pipe(gulp.dest('dist/css'));//把src文件所有的html压缩到dist文件夹里
})

命令： gulp lesszcss

css压缩

下载插件： npm install gulp-csso

1
2
3
4
5
6
const csso = require('gulp-csso');
gulp.task('cssrecude',()=>{//命名方法
    gulp.src('./src/css/*.css') //*. 泛指所有文件
    .pipe(csso());
    .pipe(gulp.dest('dist/css'));//把src文件所有的html压缩到dist文件夹里
})

命令： gulp cssrecude

es6语法转换

下载插件： npm install gulp-csso

1
2
3
4
5
6
7
8
const bable = require('gulp-bable');
gulp.task('es',()=>{//命名方法
    gulp.src('./src/js/*.js') //*.泛指所有文件
    .pipe(bable({
        presets:['@bable/env']//他可以判断当前代码的运行环境 将代码转换为当前运行环境所支持的代码
    }));
    .pipe(gulp.dest('dist/js'));//把src文件所有的html压缩到dist文件夹里
})

命令： gulp es

压缩js

下载插件： npm install gulp-csso

1
2
3
4
5
6
7
8
9
const uglify = require('gulp-uglify');
gulp.task(' jsmin',()=>{//命名方法
    gulp.src('./src/js/*.js') //*.泛指所有文件
    .pipe(bable({
        presets:['@bable/env']//es6转换es5
    }));
    .pipe(uglify()); //压缩js
    .pipe(gulp.dest('dist/css'));//把src文件所有的html压缩到dist文件夹里
})

命令： gulp jsmin

复制文件夹

1
2
3
4
5
6
7
8

gulp.task('copy',()=>{//命名方法
    gulp.src('./src/images/*');   //*.泛指所有文件
    .pipe(gulp.dest('dist/images'));
    
     gulp.src('./src/lib/*');   //*.泛指所有文件
    .pipe(gulp.dest('dist/lib'));
})

命令： gulp copy

浏览器自动刷新

  在搭建使用gulp-livereload实时自动刷新页面的过程中，需要注意的几点是：

   1.使用 gulp-livereload 需要使用 chrome 浏览器，并且安装 gulp-livereload 插件；

   2.在 gulpfile.js 中创建task， 旧版使用var server = livereload();已经失效，需要使用 livereload.listen(); ；

   3.使用 gulp-livereload 需要使用到服务器，在服务器下进行访问，开启 gulp-livereload 插件；（当然也可以使用 npm 安装 http-server 来启动服务）
1
2
3
4
5
6
7
8
9
10
11
const gulp = require('gulp'),
    livereload = require('gulp-livereload');

gulp.task('watch',()=>{ //这里的watch，是自定义的，携程live或者别的也行
    livereload.listen();//这里需要注意！旧版使用var server = livereload();已经失效  
    // app/**/*.* 的意思是 app 文件夹下的 任何文件夹 的 任何文件
    gulp.watch('app/**/*.*', function(event) {
    	livereload.changed(event.path);
    });
});

创建服务器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const gulp=require(‘gulp’);//引入gulp模块
const connect=require(‘gulp-connect’);//引入gulp-connect模块
const open=require(‘open’);//引入open模块，注意不是gulp-open
//我们可以定义一个根目录：
const rootPath=’./’;　　　//根据实际情况定义

gulp.task('serve',()=>{
　　connect.server({
　　　　root:rootPath,　　//使用前面定义的rootPath作为服务器运行的根目录
　　　　livereload:true,　　//是否自动监听，true表明自动监听
　　　　port:3056　　　　//服务器的端口号，可以随便取一个
　　});
　open(‘http://localhost:3056’);　　//自动使用浏览器打开http://localhost:3056的页面
});

构建任务

一次命令 多种任务同时做

1
2
gulp.task('default',['htmlmin','csso','jsmin'])