gulp教程_从入门到项目中快速上手使用方法

2023-09-24 18:13:06 381

gulp是什么？

gulp是基于node实现Web前端自动化开发的工具，利用它能够极大的提高开发效率。在Web前端开发工作中有很多“重复工作”，比如压缩CSS/JS文件。而这些工作都是有规律的。找到这些规律，并编写gulp配置代码,让gulp自动执行这些“重复工作”

一、安装gulp与压缩js文件

命令:

npminstallgulp-g

npminstallgulp--save-dev

初始化项目package.json的配置：npminit--yes

创建项目的目录结构

demo2
-----dist
-----src
-css
-img
-js
-----gulpfile.js
-----package.json

在js目录下新建文件(lib.js)

varOper={
add:function(n1,n2){
returnn1+n2;
},
sbb:function(n1,n2){
returnn1-n2;
}
}

安装压缩js的插件:npminstallgulp-uglify--save-dev,

然后在gulpfile.js中，输入任务处理代码

vargulp=require('gulp');
varuglify=require('gulp-uglify');

gulp.task('min-js',function(){
gulp.src('src/js/*.js')
.pipe(uglify())
.pipe(gulp.dest('dist/js'));
});

gulp.task(name,fn)-定义任务，第一个参数是任务名，第二个参数是任务内容。

gulp.src(path)-选择文件，传入参数是文件路径。

gulp.dest(path)-输出文件

gulp.pipe()-管道，你可以暂时将pipe理解为将操作加入执行队列

在命令行执行任务:gulpmin-js

就会在dist/js/lib.js生成压缩文件

varOper={add:function(n,r){returnn+r},sbb:function(n,r){returnn-r}};

在demo2目录下创建index.html，输入以下测试代码

发现压缩好的lib.js文件是可以正常使用的

二、压缩css文件

安装插件：npminstallgulp-clean-css--save-dev

demo2/src/css下新建文件style.css

html,body{
margin:0;
padding:0;
}
li{
list-style-type:none;
}
a{
text-decoration:none;
color:#666;
}

在gulpfile.js文件中添加压缩css的任务

vargulp=require('gulp');
varuglify=require('gulp-uglify');
varcleanCSS=require('gulp-clean-css');

gulp.task('min-js',function(){
gulp.src('src/js/*.js')
.pipe(uglify())
.pipe(gulp.dest('dist/js'));
});

gulp.task('min-css',function(){
gulp.src('src/css/*.css')
.pipe(cleanCSS())
.pipe(gulp.dest('dist/css'));
});

然后在命令行执行gulpmin-css任务就会在dist/css生成style.css压缩文件

body,html{margin:0;padding:0}li{list-style-type:none}a{text-decoration:none;color:#666}

三、编译less文件

安装插件：npminstallgulp-less--save-dev

在src/css下面新建style.less文件

@c1:green;
@c2:red;
div{
width:200px;
height:200px;
background:@c1;
div{
background:@c2;
transition:allease1s;
}
}

gulpfile.js中添加任务:

vargulp=require('gulp');
varuglify=require('gulp-uglify');
varcleanCSS=require('gulp-clean-css');
varless=require('gulp-less');

gulp.task('min-js',function(){
gulp.src('src/js/*.js')
.pipe(uglify())
.pipe(gulp.dest('dist/js'));
});

gulp.task('min-css',function(){
gulp.src('src/css/*.css')
.pipe(cleanCSS())
.pipe(gulp.dest('dist/css'));
});

gulp.task('compile-less',function(){
gulp.src('src/css/*.less')
.pipe(less())
.pipe(gulp.dest('dist/less'));
});

执行任务:gulpcompile-less，在dist/less中生成style.css文件

div{
width:200px;
height:200px;
background:green;
}
divdiv{
background:red;
transition:allease1s;
}

四、合并js文件

安装插件：npminstallgulp-concat--save-dev

demo2/src/js新建lib2.js文件：

function$(id){
returndocument.getElementById(id);
}

在gulpfile.js中新增任务:

vargulp=require('gulp');
varuglify=require('gulp-uglify');
varcleanCSS=require('gulp-clean-css');
varless=require('gulp-less');
varconcat=require('gulp-concat');

gulp.task('min-js',function(){
gulp.src('src/js/*.js')
.pipe(uglify())
.pipe(gulp.dest('dist/js'));
});

gulp.task('concat-file',function(){
gulp.src('src/js/*.js')
.pipe(concat('all.min.js'))
.pipe(uglify())
.pipe(gulp.dest('dist/js'));
});

gulp.task('min-css',function(){
gulp.src('src/css/*.css')
.pipe(cleanCSS())
.pipe(gulp.dest('dist/css'));
});

gulp.task('compile-less',function(){
gulp.src('src/css/*.less')
.pipe(less())
.pipe(gulp.dest('dist/less'));
});

执行任务：gulpconcat-file

在dist/js下面生成all.min.js文件

function$(n){returndocument.getElementById(n)}varOper={add:function(n,t){returnn+t},sbb:function(n,t){returnn-t}};

五、自动监测文件变化，执行任务

gulp.task('auto',function(){
gulp.watch('src/js/*.js',['min-js']);
gulp.watch('src/css/*.css',['min-css']);
});
gulp.task('default',['auto']);

这里添加了一个默认任务default:执行auto任务，auto里面自动监测压缩js和压缩css任务

在命令行直接执行gulp.

要执行其他任务，只需要按照这几步就可以了：

1，安装相应的插件

2，添加相应的任务

3，执行任务

以上这篇gulp教程_从入门到项目中快速上手使用方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

gulp教程_从入门到项目中快速上手使用方法

热门推荐

随机推荐