gulp的基本使用

最新推荐文章于 2023-03-18 20:17:41 发布

呵呵hew

最新推荐文章于 2023-03-18 20:17:41 发布

阅读量231

点赞数 1

分类专栏： gulp 文章标签：前端 gulp

本文链接：https://blog.csdn.net/qq_37322278/article/details/80267745

版权

gulp 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Gulp的基本使用

gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；她不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用她，我们不仅可以很愉快的编写代码，而且大大提高我们的工作效率。

一. 安装gulp

1 . npm install gulp -g (安装全局的gulp,必须先配置nodejs的环境,这里就不多讲了)

2. npm install gulp --save-dev (安装开发环境的gulp)

二. 新建gulpfile.js文件

1 . 新建一个gulpfile.js文件用来书写gulp的task(gulp的代码构建和打包都是基于task)

2. 新建gulp中的task , Gulpfile.js中使用gulp中的方法主要有4个:

/**
* src 读取源文件
* task 声明一个任务
* pipe 数据输送的管道
* gulp 文件输出
* watch 对文件或文件夹添加监视
*/

这里先以最简单的文件拷贝为例:

/**
* 拷贝html
*/
gulp.task('html',function () {
gulp.src('src/*.html')
.pipe(gulp.dest('dist'));
});

这里先使用src()指向我们的源文件,再用pipe()进行数据输送,再用dest()指定输出的文件目录

这里输出的文件目录若果不存在gulp将为我们自动创建.

然后使用gulp html就可以进行html文件的拷贝了这里的html使我们声明的task的名称,如果这里的task的名称使用的default那么在执行的时候可以直接使用gulp命令执行,因为gulp默认执行的就是default任务

三.了解gulp的主要功能

gulp的功能有很多大家使用时需要什么,就可以使用npm安装对应的node_module,这里我给大家举了3个例子:

1. 压缩图片:

先npm install gulp-imagemin --save-dev

var imageMin = require('gulp-imagemin');

/**
* 压缩图片
*/
gulp.task('image',function () {
    gulp.src('src/images/*')
        .pipe(imageMin())
        .pipe(gulp.dest('dist/images'))
});

同样先使用src()方法指定源文件的路径,在使用pipe()方法进行文件输送,在pipe方法的参数中使用imageMin()方法压缩图片,最后输出到dest()方法指向的目录

2. 合并并压缩js:

同样先npm install gulp-uglify gulp-concat --save-dev

var uglify = require('gulp-uglify');
var concat = require('gulp-concat');

/**
* 合并压缩js
*/
gulp.task('concat',function () {
    gulp.src('src/js/*.js')
        .pipe(concat('main.js'))
        .pipe(uglify())
        .pipe(gulp.dest('dist/js'));
});

这里的concat()方法就是进行文件压缩的,它里面的参数指定合并后js文件的名称

3. 编译sass文件

同样先npm install gulp-sass --save-dev

var sass = require('gulp-sass');

/**
* 编译sass文件
*/
gulp.task('sass',function () {
    gulp.src('src/sass/*.scss')
        .pipe(sass().on('error',sass.logError))
        .pipe(gulp.dest('dist/css'));
});

Gulp还有很多其他的功能使用也是大同小异大家开发中如果有需要就可以去npm的社区查找一下gulp相关的插件及使用,在这里就不一一介绍了

四.设置监听任务

Gulp中可以添加对文件的监视,如果文件进行了修改监听中配置的任务就会自动执行

/**
* 监听文件修改
*/
gulp.task('watch',function () {
    gulp.watch('src/js/*.js',['concat']);
    gulp.watch('src/images/*',['image']);
    gulp.watch('src/*.html',['html']);
    gulp.watch('src/sass/*.scss',['sass']);
});