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

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

gulp是什么？

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

一、安装gulp与压缩js文件

命令:

npm install gulp -g

npm install gulp --save-dev

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

创建项目的目录结构

demo2

-----dist

-----src

-css

-img

-js

-----gulpfile.js

-----package.json

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

var Oper = {

add : function( n1, n2 ){

return n1 + n2;

},

sbb : function( n1, n2 ){

return n1 - n2;

}

}

安装压缩js的插件: npm install gulp-uglify --save-dev,

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

var gulp = require( 'gulp' );

var uglify = 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 理解为将操作加入执行队列

在命令行执行任务: gulp min-js

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

var Oper={add:function(n,r){return n+r},sbb:function(n,r){return n-r}};

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

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

二、压缩css文件

安装插件： npm install gulp-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的任务

var gulp = require( 'gulp' );

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

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

});

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

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

三、编译less文件

安装插件：npm install gulp-less --save-dev

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

@c1 : green;

@c2 : red;

div {

width:200px;

height:200px;

background:@c1;

div {

background:@c2;

transition:all ease 1s;

}

}

gulpfile.js中添加任务:

var gulp = require( 'gulp' );

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

var cleanCSS = require( 'gulp-clean-css' );

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

} );

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

div {

width: 200px;

height: 200px;

background: green;

}

div div {

background: red;

transition: all ease 1s;

}

四、合并js文件

安装插件：npm install gulp-concat --save-dev

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

function $( id ){

return document.getElementById( id );

}

在gulpfile.js中新增任务:

var gulp = require( 'gulp' );

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

var cleanCSS = require( 'gulp-clean-css' );

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

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

} );

执行任务：gulp concat-file

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

function $(n){return document.getElementById(n)}var Oper={add:function(n,t){return n+t},sbb:function(n,t){return n-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，执行任务

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。