gulp工具的使用_gulp demo-CSDN博客

本文链接：https://blog.csdn.net/qq_23586923/article/details/100847022

今天学习了一个比较重要的前端工具：gulp，现在整理一下gulp的使用过程。

1.gulp是什么？

gulp是前端开发过程中对代码进行自动化构建的利器。说的通俗一点就是：gulp能够优化，压缩js，html，img和预处理CSS等。具体的功能在文章的最后。

2.gulp准备工作

2.1 前提条件是系统已经装好了node.js和npm。

2.2 安装gulp工具

npm install -g gulp

2.3 初始化gulp项目

创建一个项目文件夹gulp-demo，进入gulp-demo文件夹，初始化gulp

gulp init

一直回车，得到一个package.json，这个文件就是相当于是gulp的配置文件

2.4 创建gulp运行文件（gulpfile.js）

创建gulpfile.js文件，这个文件就是gulp运行业务逻辑的文件。

2.5 安装gulp插件

gulp插件能够配合gulp完成上面所说的功能。

npm install gulp-less gulp-htmlmin gulp-concat gulp-uglify gulp-cssnano browser-sync --save-dev

这些插件分别是解析less文件，html压缩，js合并，js压缩，css压缩和开启服务

--save-dev的作用就是在package.json中添加依赖，项目完成的时候去掉node_modules文件。项目移到服务器上是，再npm install。如下图所示就是依赖成立。

3.使用gulp工具

3.1项目资源目录的建立

在gulp-demo文件夹中建立src资源目录，这个文件是项目的资源目录，通过这个目录生成真实的运行的文件目录。这个文件夹可不是项目的真实运行目录。文件结构如下

这个自己是可以自己随便定义的。按自己的项目业务来。没有固定的格式。

3.2完善gulpfile.js文件

'use strict';

/*
* 1. less 编译，压缩，合并
* 2. js合并，压缩和混淆
* 3. img复制
* 4. html 压缩
* 5.这个gulp4.0.3版本
* */

//引入gulp包
var gulp = require('gulp'); //css 工具
var less = require('gulp-less'); //预处理css
var cssnano = require('gulp-cssnano') // css压缩
var concat = require('gulp-concat')   //js合并
var uglify = require('gulp-uglify')   //js压缩
var htmlmin  = require('gulp-htmlmin'); //html压缩


var browserSync = require('browser-sync');
gulp.task('serve',async() =>{  //创建了一个serve任务
    browserSync({
        server: {
            baseDir :['dist']   //文件的根目录(运行目录)，这个目录会在gulp-demo下生成
        },
    }, function(err, bs) {
        console.log(bs.options.getIn(["urls", "local"]));
    });

    //less 编译，压缩，合并
    gulp.watch('src/styles/*.less',async() =>{   //监听src/styles/中所有的less文件，改变以后重新刷新浏览器服务
        gulp.src(['src/styles/*.less','!src/styles/_*.less'])
            .pipe(less())  //解析less文件 注意：.pipe这里的代码需要参考插件文档
            .pipe(cssnano()) //压缩css
            .pipe(gulp.dest('dist/styles/')) //生成css文件并移到dist文件目录下
            .pipe(browserSync.reload({
                stream: true
            }));   //刷新服务
    });
    //js合并，压缩和混淆
    gulp.watch('src/scripts/*.js',async() =>{
        gulp.src('src/scripts/*.js')
            .pipe(concat('all.js')) //定义生成的js文件名（合并了所有的js文件）
            .pipe(uglify()) //压缩js文件
            .pipe(gulp.dest('dist/sctipts'))
            .pipe(browserSync.reload({
                stream: true
            }));
    });
    //img复制
    gulp.watch('src/images/*.*',async() =>{
        gulp.src('src/images/*.*')
            .pipe(gulp.dest('dist/images'))
            .pipe(browserSync.reload({
                stream: true
            }));
    });
    //html 压缩
    gulp.watch('src/*.html',async() =>{
        gulp.src('src/*.html')
            .pipe(htmlmin({
                collapseWhitespace: true,
                removeComments:true
            }))
            .pipe(gulp.dest('dist/'))
            .pipe(browserSync.reload({
                stream: true
            }));
    });
});

3.3 运行gulpfile.js文件