自動化構建工具gulp簡單介紹及使用

1、簡介及安裝：

　　gulp是前端開發過程當中對代碼進行構建的工具，是自動化項目的構建利器；她不只能對網站資源進行優化，並且在開發過程當中不少重複的任務可以使用正確的工具自動完成；使用她，咱們不只能夠很愉快的編寫代碼，並且大大提升咱們的工做效率

gulp的優勢：基於流的操做、任務化。

 

經常使用api：src 、dest、watch、task、pipe

因爲gulp是基於node的因此使用的時候須要經過npm或者cnpm安裝全局安裝（cnpm i -g gulp）

經常使用的gulp須要安裝的包括gulp-clean   gulp-connect   gulp-concat    gulp-cssmin    gulp-imagemin    gulp-less  gulp-load-plugins  gulp-uglify  open

安裝以上的gulp插件可使用cnpm i --save-dev xxx(--save-dev可使安裝的插件的依賴保存在package.json中),同時有一種快捷的方式能夠一次性安裝多個，每一個組件之間使用空格隔開cnpm i --save-dev gulp-concat gulp-connect等

安裝完以上插件，package.json的文件會添加下面的依賴。

2、使用

　　首先須要建立一個gulpfile.js文件，使用require引入gulp模塊，同時引入gulp-load-plugins模塊（引入該模塊的目的是爲了當之後想要引入gulp-connect等插件的時候，能夠經過$直接引入，這樣比較方便）

      下面結合具體的實例對以上進行說明：（具體的已經給出註釋說明）

　　

 1 var gulp = require('gulp');
 2 //引入gulp-load-plugins模塊 注意要將其實例化
 3 var $ = require('gulp-load-plugins')();
 4 var open = require('open');
 5 
 6 var app = {
 7   srcPath: 'src/',
 8   devPath: 'build/',
 9   prdPath: 'dist/'
10 };
11 
12 gulp.task('lib', function() {
13   gulp.src('bower_components/**/*.js')//讀取文件目錄
14   .pipe(gulp.dest(app.devPath + 'vendor'))//寫入目錄
15   .pipe(gulp.dest(app.prdPath + 'vendor'))
16   .pipe($.connect.reload());//從新刷新瀏覽器
17 });
18 
19 gulp.task('html', function() {
20   gulp.src(app.srcPath + '**/*.html')
21   .pipe(gulp.dest(app.devPath))
22   .pipe(gulp.dest(app.prdPath))
23   .pipe($.connect.reload());
24 })
25 
26 
27 gulp.task('json', function() {
28   gulp.src(app.srcPath + 'data/**/*.json')
29   .pipe(gulp.dest(app.devPath + 'data'))
30   .pipe(gulp.dest(app.prdPath + 'data'))
31   .pipe($.connect.reload());
32 });
33 
34 gulp.task('less', function() {
35   gulp.src(app.srcPath + 'style/index.less')
36   .pipe($.plumber())
37   .pipe($.less())//編譯less文件
38   .pipe(gulp.dest(app.devPath + 'css'))
39   .pipe($.cssmin())//壓縮css文件
40   .pipe(gulp.dest(app.prdPath + 'css'))
41   .pipe($.connect.reload());
42 });
43 
44 gulp.task('js', function() {
45   gulp.src(app.srcPath + 'script/**/*.js')
46   .pipe($.plumber())
47   .pipe($.concat('index.js'))//將js文件合併到index.js文件中
48   .pipe(gulp.dest(app.devPath + 'js'))
49   .pipe($.uglify())//壓縮js文件
50   .pipe(gulp.dest(app.prdPath + 'js'))
51   .pipe($.connect.reload());
52 });
53 
54 gulp.task('image', function() {
55   gulp.src(app.srcPath + 'image/**/*')
56   //捕獲處理任務中的錯誤
57   .pipe($.plumber())
58   .pipe(gulp.dest(app.devPath + 'image'))
59   .pipe($.imagemin())//壓縮圖片文件
60   .pipe(gulp.dest(app.prdPath + 'image'))
61   .pipe($.connect.reload());
62 });
63 //總的任務
64 gulp.task('build', ['image', 'js', 'less', 'lib', 'html', 'json']);
65 //清除目錄中的內容
66 gulp.task('clean', function() {
67   gulp.src([app.devPath, app.prdPath])
68   .pipe($.clean());
69 });
70 
71 gulp.task('serve', ['build'], function() {
72   $.connect.server({
73     root: [app.devPath],//讀取路徑
74     livereload: true,//自動刷新
75     port: 3000
76   });
77   //打開默認地址
78   open('http://localhost:3000');
79   //監控文件 當變化時執行相對應的任務
80   gulp.watch('bower_components/**/*', ['lib']);
81   gulp.watch(app.srcPath + '**/*.html', ['html']);
82   gulp.watch(app.srcPath + 'data/**/*.json', ['json']);
83   gulp.watch(app.srcPath + 'style/**/*.less', ['less']);
84   gulp.watch(app.srcPath + 'script/**/*.js', ['js']);
85   gulp.watch(app.srcPath + 'image/**/*', ['image']);
86 });
87 
88 gulp.task('default', ['serve']);

View Code

因爲剛開通博客，不怎麼會排版，寫得知識也只是我的理解，若是問題請指出。但願大神們多多指教。