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'])