欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

gulp 安装 配置 使用

程序员文章站 2022-03-07 21:13:37
gulp 一个前端自动化构建工具安装gulp首先 检查 node、npm 和 npx 是否正确安装node --version npm --version npx --version安装 gulp 命令行工具npm install --global gulp-cli ( 全局安装gulp)2.准备一个项目(以下所有操作都在该项目的根目录中进行)dist (放置优化后的代码,便于上线)src (放置源代码,后期维护只在src中)1> 对项目...

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

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

相关标签: nodejs 前端 npm