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

    	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 = 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');

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

 //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);
    }

导出模块

     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

黄山市民网：https://www.huangshanshimin.com/

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

相关文章