Gulp入门使用

Gulp介绍

gulp 是基于 node 实现 Web 前端自动化开发的工具，利用它能够极大的提高开发效率。

gulp是一个自动化构建工具，主要用来设定程序自动处理静态资源的工作。简单的说，gulp就是用来打包项目的。

官网：ulpjs.com/
中文官网：www.gulpjs.com.cn/

插件官网:gulpjs.com/plugins/

导入gulp

//导入gulp
const gulp = require('gulp');

安装插件

//安装插件
npm install gulp-less  //es6代码转换为Gulp-less
npm install gulp-csso  //代码压缩Gulp-csso

引入插件

//引用gulp-less插件
const less = require('gulp-less')
//引用gulp-csso插件
const cssmin = require('gulp-csso')

在css文件中建后缀为.less的文件写入:

.father{
    background-color: pink;
    font-size: 16px;

    .son{
        font-weight: bold;
    }
}

建立任务

// 建立任务：转换less语法，压缩css文件
gulp.task('cssmin', callback => {
    // 获取文件.css .less两种类型的文件
    gulp.src(['./src/*.css', './src/css/*.less'])
       // 转换less语法
       .pipe(less())
       // 压缩css文件
       .pipe(cssmin())
        // 输出处理之后的文件
        .pipe(gulp.dest('./dist/css'))
    callback();
})

 终端执行任务 gulp cssmin

//安装插件
npm install gulp-uglify  //es6代码转换为Gulp-babel
npm install gulp-babel  //代码压缩Gulp-uglify

// 引入gulp-babel插件
const babel = require('gulp-babel')
// 引入gulp-uglify插件
const uglify = require('gulp-uglify')

安装完成在package.json中查看

{
  "name": "gulp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^4.0.2"
  },
  "dependencies": {
    "@babel/core": "^7.21.3",
    "@babel/preset-env": "^7.20.2",
    "gulp-babel": "^8.0.0",
    "gulp-csso": "^4.0.1",
    "gulp-file-include": "^2.3.0",
    "gulp-htmlmin": "^5.0.1",
    "gulp-less": "^5.0.0",
    "gulp-uglify": "^3.0.2",
    "uglify": "^0.1.5"
  }
}

 

//建立任务：转换es6语法，压缩js文件
gulp.task('jsmin', callback => {
    //获取文件.js
    gulp.src('./src/js/*.js')
    //转换es6代码
    .pipe(babel({
        //判断当前代码的运行环境
        presets:['@babel/env']
    }))
    //压缩js文件
    .pipe(uglify())
    //处理输出之后的文件
    .pipe(gulp.dest('./dist/js'))
    callback();
})

 终端执行任务gulp jsmin

压缩html文件以及抽取公共部分代码

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

//引用htmlmin插件
const htmlmin = require('gulp-htmlmin')
//引入gulp-file-include
const fileInclude = require('gulp-file-include')

//建立任务：压缩html文件以及抽取公共部分代码
gulp.task('htmlmin',callback => {
    //获取文件，HTML文件
    gulp.src('./src/*.html')
    //抽取公共部分的代码
    .pipe(fileInclude())
    //压缩html文件
    //.pipe（）只是对文件处理的结果进行包装，并不会直接操作文件
    .pipe(htmlmin({
        collapseWhitespace: true
    }))
    .pipe(gulp.dest('./dist'))
    callback(

1.先把头部公共部分的代码剪切放在common文件夹下面的header.html文件中@@include()语法是由gulp-file-include插件提供的，小括号中是代码片段的路径以及文件的名字。2. 在原文件中（article.html）使用@@include('./common/header.html')（）里面存放路径。

终端执行任务 gulp htmlmin