一、簡介及安裝: gulp是前端開發過程中對代碼進行構建的工具,是自動化項目的構建利器;她不僅能對網站資源進行優化,而且在開發過程中很多重覆的任務能夠使用正確的工具自動完成;使用她,我們不僅可以很愉快的編寫代碼,而且大大提高我們的工作效率 gulp的優點:基於流的操作、任務化。 常用api:src ...
一、簡介及安裝:
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的文件會添加下麵的依賴。
二、使用
首先需要創建一個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
由於剛開通博客,不怎麼會排版,寫得知識也只是個人理解,如果問題請指出。希望大神們多多指教。