gulp 安装 配置 使用

gulp 一个前端自动化构建工具

安装gulp
首先 检查 node、npm 和 npx 是否正确安装
node –version npm –version npx –version
安装 gulp 命令行工具
npm install –global gulp-cli （ 全局安装gulp）
2.准备一个项目（以下所有操作都在该项目的根目录中进行）
dist (放置优化后的代码，便于上线)
src (放置源代码，后期维护只在src中)

1> 对项目进行打包： npm | cnpm init [-y]
2> 安装本地gulp及需要的插件： (本地安装的插件一个项目，就需要安装一次)
（插件地址： /d/file/titlepic/ ）

    npm  | cnpm install --save-dev gulp    本地安装gulp    npm | 家乡的特色美食cnpm  install --save-dev   插件名       

3> 在项目根目录中创建一个 gulpfile.js 的配置文件

导入所需模块 （安装了哪些就导入哪些，这里我导入的是我安装的）

const gulp = require('gulp');const html = require('gulp-htmlmin');const cssnano = requ古代科举考试ire('gulp-cssnano');const rename = require('gulp-rename');const uglify = require('gulp-uglify');const concat = require('gulp-concat');const imgmin = require('gulp-imagemin');const babel = require('gulp-babel'); 

发布任务（注意：任务里的文件路径根据自己实际的文件名去定义）

 //copy 首页的任务   function fnCopyIndex(){        return gulp.src('./src/index.html')            .pipe(gulp.dest('./dist'));    }    //处理css的任务    function fnCss(){        return gulp.src('./src/sass/*.css')            .pipe(cssnano())            .pipe(rename({suffix : '.min'}))            .pipe(gulp.dest('./dist/css'));    }    //处理js的任务    function fnJS(){        return gulp.src('./src/js/*.js')        .pip书信的格式怎么写e(babel({            prets: ['@babel/env']        }))        .pipe(concat('index.js'))        .pipe(uglify())        .pipe(rename({suffix : '.min'}))        .pipe(gulp.dest('./dist/js'));    }    //处理图片的任务    function fnImg(){        return gulp.src('./src/img/*')        .pipe(imgmin())        .pipe(gulp.dest('./dist/img'));    }    //处理html页面    function fnHTML(){        return gulp.src('./src/pages/*.html')        .pipe(html())        .pipe(gulp.dest('./dist/pages'));    }    //监听任务    function fnWatch(){        gulp.watch('./src/index.html',fnCopyIndex);        gulp.watch('./src/sass/*.css',fnCss);        gulp.watch('./src/js/*.js',fnJS);        gulp.watch('./src/pages/*.html',fnHTML);    }

导出模块

     exports.copyIndex = fnCopyIndex;     exports.css = fnCss;     exports.js = fnJS;     exports.img = fnImg;     exports.html = fnHTML;     exports.de渝西学院fault = fnWatch;

4> 运行任务

   1.gulp 任务名  （例：gulp fnCss）    2.如果是default任务名，那么只运行： gulp

5> 注：

        1》》在运行监听任务前，一定要先运行其它的单任务        2》》如果代码有错，则自动退出监听

本文地址：https://blog.csdn.net/qq_44888024/article/details/111855438