Gulp基础入门

官网：https://www.gulpjs.com.cn/

npm：https://www.npmjs.cn/

Gulp 是一个自动化工具，前端开发者可以使用它来处理常见任务：

• 搭建web服务器
• 文件保存时自动重载浏览器
• 使用预处理器如Sass、LESS 优化资源
• 比如压缩CSS、JavaScript、压缩图片

所需要的环境：nodeJs

项目基础结构：

• src 文件夹、用于存放源代码文件
• dist 文件夹、用于存放构建后的文件
• gulpfile.js 脚本文件、用于编写gulp任务

然后下载gulp库文件：npm install gulp
下载gulp-cli命令工具： npm install gulp-cli -g

gulp提供的方法：

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

小尝试:

const gulp = require("gulp");
//使用task创建gulp任务
// 第一个参数 代表任务的名称
// 第二个代表回调函数
gulp.task('first',()=>{
    console.log("执行")
    // 使用src获取要处理的任务
    // 使用dest 把文件输出到其他文件夹
    gulp.src('./src/css/icon.css')
        .pipe(gulp.dest('dist/css'))
})

终端中 执行 gulp first

gulp第三方插件

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

插件的使用三步骤：

1. 通过 npm 安装插件
2. 通过 require 引用插件
3. 通过语法使用插件

const gulp = require("gulp");
const htmlmin = require('gulp-htmlmin')
const fileInclude = require('gulp-file-include')
const less = require('gulp-less')
const csso = require('gulp-csso');
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');

// npm install gulp-htmlmin  gulp-file-include
//  html 压缩 
// 抽取公共代码
gulp.task('htmlmin',()=>{
    // collapseWhitespace 代表是否要压缩文件中的空白格
    gulp.src('./src/*.html')
    .pipe(fileInclude())
    .pipe(htmlmin({collapseWhitespace:true}))
    .pipe(gulp.dest('dist'))
})

// npm install gulp-less  gulp-csso
// 压缩css
// 转化less
gulp.task('cssmin',()=>{
    gulp.src('./src/css/*.less')
        .pipe(less())
        .pipe(csso())
        .pipe(gulp.dest('dist/css'))
})


// npm install gulp-uglify  gulp-babel
// 转换js
gulp.task('jsmin', () =>
    gulp.src('src/app.js')
        .pipe(babel({
            presets: ['@babel/env']
        }))
        .pipe(uglify())
        .pipe(gulp.dest('dist'))
);


// 复制文件夹
gulp.copy('copy',()=>{
    gulp.src('src/images/*')
        .pipe(gulp.dest('dist/images'))
})

//  把所有任务整合在一起
gulp.task('default',['htmlmin','cssmin','jsmin','copy'])