[js高手之路]gulp教程-從入門到項目中快速上手使用

在這之前，我已經分享過一個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，執行任務