gulp的安装与使用

gulp的安装与使用

一、安装gulp-cli

全局安装

• 在cmd中输入`

npm install gulp-cli@2.3.0 -g

局部安装

• 在创建项目的目录下使用npm初始化项目

npm init

• 打开cmd命令行工具，输入

npm install gulp@4.0.2 --save-dev

检查是否安装成功

• 在cmd中输入

gulp -v

显示下图即为安装成功

二、gulp的常用方法

gulp.src()	获取任务要处理的文件 参数：文件路径
gulp.dest()	输出文件 参数：文件路径
gulp.task()	创建gulp任务 参数1：任务名，参数2：回调函数
gulp.watch()	监控文件的变化

三、gulp常用的插件

gulp-htmlmin	压缩html文件
gulp-csso	压缩优化css文件
gulp-babel	js语法转换
gulp-less	less语法转换
gulp-file-include	公共文件包含
gulp-uglify	压缩js文件

四、安装插件

gulp的插件需要在cmd中使用npm下载

• 压缩html文件

npm install gulp-htmlmin

• 压缩css文件

npm install gulp-csso

• 压缩公共文件

npm install gulp-file-include

• 压缩js文件

npm install gulp-uglify

• less语法转换

npm install gulp-less

• js语法转换

npm install gulp-babel @babel/core @babel/preset-env

打开项目描述文件package.json可查看插件是否完成下载

五、在项目中使用gulp

项目目录

在目录下创建gulpfile.js文件，在该文件中建立任务

• 压缩并抽取html中的公共部分

1.将目录中src下的html文件的公共头部部分抽取出来放到common目录下的header.html中，在被抽取的html文件中删除头部替换为

@@include(‘./common/header.html’)

//引入gulp模块
const gulp=require('gulp')
//引用htmlmin插件
const htmlmin=require('gulp-htmlmin')
//公共代码
const fileinclude=require('gulp-file-include')

**//建立名字为htmlmin的任务**

gulp.task('htmlmin',callback=>{ 
     // 获取文件.html的文件
   gulp.src('./src/*.html')
   //抽取公共部分代码
   .pipe(fileinclude())
   //压缩html代码，
   .pipe(htmlmin({
     collapseWhitespace:true  //压缩去除空格
}))//抽取并压缩后的文件数去dist
.pipe(gulp.dest('./dist'))
   callback()
})

在cmd中执行任务输入

gulp htmlmin

在dist目录中的被压缩的html文件中，可以看到被抽取得公共部分代码

• 压缩并转换less语法
  1.在src下的css目录下创建less文件

.father{
   background-color: white;
   font-size: 16px;
   .son{
       font-weight:bold ;
   }
}

2.在gulpfile.js中创建任务

//引入gulp模块
const gulp=require('gulp')
//gulp-less less语法转为css语法
const less=require('gulp-less')
//gulp-csso 压缩css文件
const csso=require('gulp-csso')
**//建立名字为cssmin的任务**
gulp.task('cssmin',callback=>{
      // 获取文件.css .less两种类型的文件
    gulp.src(['./src//css*.css','./src/css/*.less'])
     // 转换less语法
        .pipe(less())
         // 压缩css文件
        .pipe(csso())
        // 输出处理之后的文件
        .pipe(gulp.dest('./dist/css'))
    callback()
})

在cmd中执行任务输入

gulp cssmin

转变后的css截图

• 压缩并转换es6语法
• 1.在js文件中创建ES6语法的文件

const x = 100;
let y = 200;
const fn = () => {
	console.log(1234);
}

2.在gulpfile.js中创建任务

//引入gulp模块
const gulp=require('gulp')
//转换es6
const babel=require('gulp-babel')
//压缩js
const uglify=require('gulp-uglify')
//创建名字为jsmin的任务
gulp.task('jsmin',callback=>{
    //获取文件
    gulp.src('./src/js/*.js')
    //转换es6
    .pipe(babel({
        //判断当前代码的运行环境，将代码转换为当前运行环境所支持的代码
        presets:['@babel/env']
    }))
    //压缩js
    .pipe(uglify())
    .pipe(gulp.dest('./dist/js'))
    callback()
})

在cmd中执行任务输入

gulp jsmin

转变后js截图

• 复制目录

//引入gulp模块
const gulp=require('gulp')
//创建copy任务
gulp.task('copy',callback=>{
//选取将src下的images目录下的所有文件
    gulp.src('./src/images/*')
    //输入到上当前目录dist目录下的images中
    .pipe(gulp.dest('./dist/images'))
    //同理
    gulp.src('./lib/*')
    .pipe(gulp.dest('./dist/lib/'))
    callback()
})

• 执行全部任务
  gulp.task(‘default’,gulp.series(‘任务1’，‘任务2’，…))

gulp.task(‘default’,gulp.series(‘first’,‘htmlmin’,‘cssmin’,‘jsmin’,‘copy’))