gulp 安装 配置 使用

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

1. 安装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及需要的插件： (本地安装的插件一个项目，就需要安装一次)
   （插件地址： https://gulpjs.com/plugins/ ）

       	npm  | cnpm install --save-dev gulp    本地安装gulp
   	    npm | cnpm  install --save-dev   插件名       
   

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

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

      const gulp = require('gulp');
      const html = require('gulp-htmlmin');
      const cssnano = require('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'); 
      

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

       //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')
              .pipe(babel({
                  presets: ['@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);
          }
      

   3. 导出模块

           exports.copyIndex = fnCopyIndex;
           exports.css = fnCss;
           exports.js = fnJS;
           exports.img = fnImg;
           exports.html = fnHTML;
           exports.default = fnWatch;
      

4> 运行任务

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

5> 注：

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

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