在这之前，我已经分享过一个webpack的全系列，相对于webpack, 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

创建项目的目录结构

1 demo2
2 -----dist
3 -----src
4         -css
5         -img
6         -js
7 -----gulpfile.js
8 -----package.json

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

1 var Oper = {
2     add : function( n1, n2 ){
3         return n1 + n2;
4     },
5     sbb : function( n1, n2 ){
6         return n1 - n2;
7     }
8 }

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

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

1 var gulp = require( \'gulp\' );
2 var uglify = require( \'gulp-uglify\' );
3 
4 gulp.task(\'min-js\', function() {
5     gulp.src(\'src/js/*.js\')
6         .pipe( uglify() )
7         .pipe( gulp.dest(\'dist/js\') );
8 });
  • 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，输入以下测试代码

1 <script src="./dist/js/lib.js"></script>
2     <script>
3         alert( Oper.add( 100, 200 ) );
4     </script>

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

二、压缩css文件

安装插件： npm install gulp-clean-css –save-dev

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

 1 html,body {
 2     margin:0;
 3     padding:0;
 4 }
 5 li {
 6     list-style-type:none;
 7 }
 8 a{
 9     text-decoration: none;
10     color:#666;
11 }

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

 1 var gulp = require( \'gulp\' );
 2 var uglify = require( \'gulp-uglify\' );
 3 var cleanCSS = require( \'gulp-clean-css\' );
 4 
 5 gulp.task(\'min-js\', function() {
 6     gulp.src(\'src/js/*.js\')
 7         .pipe( uglify() )
 8         .pipe( gulp.dest(\'dist/js\') );
 9 });
10 
11 gulp.task(\'min-css\', function() {
12     gulp.src(\'src/css/*.css\')
13         .pipe( cleanCSS() )
14         .pipe( gulp.dest(\'dist/css\') );
15 });

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

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

三、编译less文件

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

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

 1 @c1 : green;
 2 @c2 : red;
 3 div {
 4     width:200px;
 5     height:200px;
 6     background:@c1;
 7     div {
 8         background:@c2;
 9         transition:all ease 1s;
10     }
11 }

gulpfile.js中添加任务:

 1 var gulp = require( \'gulp\' );
 2 var uglify = require( \'gulp-uglify\' );
 3 var cleanCSS = require( \'gulp-clean-css\' );
 4 var less = require(\'gulp-less\');
 5 
 6 gulp.task(\'min-js\', function() {
 7     gulp.src(\'src/js/*.js\')
 8         .pipe( uglify() )
 9         .pipe( gulp.dest(\'dist/js\') );
10 });
11 
12 gulp.task(\'min-css\', function() {
13     gulp.src(\'src/css/*.css\')
14         .pipe( cleanCSS() )
15         .pipe( gulp.dest(\'dist/css\') );
16 });
17 
18 gulp.task( \'compile-less\', function(){
19     gulp.src( \'src/css/*.less\' )
20         .pipe( less() )
21         .pipe( gulp.dest( \'dist/less\' ) );
22 } );

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

1 div {
2   width: 200px;
3   height: 200px;
4   background: green;
5 }
6 div div {
7   background: red;
8   transition: all ease 1s;
9 }

四、合并js文件

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

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

1 function $( id ){
2     return document.getElementById( id );
3 }

在gulpfile.js中新增任务:

 1 var gulp = require( \'gulp\' );
 2 var uglify = require( \'gulp-uglify\' );
 3 var cleanCSS = require( \'gulp-clean-css\' );
 4 var less = require(\'gulp-less\');
 5 var concat = require(\'gulp-concat\');
 6 
 7 gulp.task(\'min-js\', function() {
 8     gulp.src(\'src/js/*.js\')
 9         .pipe( uglify() )
10         .pipe( gulp.dest(\'dist/js\') );
11 });
12 
13 gulp.task( \'concat-file\', function(){
14     gulp.src( \'src/js/*.js\' )
15         .pipe( concat(\'all.min.js\') )
16         .pipe( uglify() )
17         .pipe( gulp.dest( \'dist/js\' ) );
18 } );
19 
20 gulp.task(\'min-css\', function() {
21     gulp.src(\'src/css/*.css\')
22         .pipe( cleanCSS() )
23         .pipe( gulp.dest(\'dist/css\') );
24 });
25 
26 gulp.task( \'compile-less\', function(){
27     gulp.src( \'src/css/*.less\' )
28         .pipe( less() )
29         .pipe( gulp.dest( \'dist/less\' ) );
30 } );

执行任务：gulp concat-file

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

1 function $(n){return document.getElementById(n)}var Oper={add:function(n,t){return n+t},sbb:function(n,t){return n-t}};

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

1 gulp.task( \'auto\', function(){
2     gulp.watch( \'src/js/*.js\', [\'min-js\'] );
3     gulp.watch( \'src/css/*.css\', [\'min-css\'] );
4 } );
5 gulp.task( \'default\', [\'auto\'] );

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

在命令行直接执行gulp.

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

1，安装相应的插件

2，添加相应的任务

3，执行任务

版权声明：本文为ghostwu原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/ghostwu/p/7516133.html