從零開始用gulp

gulp是基於流的前端構件化工具。目前比較火的前端構建化工具仍是挺多的，grunt gulp fis3等等。

這個鬼東西有什麼用？請參考https://www.zhihu.com/question/35595198

爲何選擇gulp,由於使用很是簡單，學習成本低。之後想用別的工具再轉去學也不難。

一個自動化構建工具都沒用過的前端，何以談人生？

 

如下是正題：

1.要玩gulp,首先得安裝node,由於npm跟隨node的包安裝管理工具。具體下載直接百度nodejs中文網，根據自身的環境（windows linux mac）下載安裝包（msi）。直接進行傻瓜式安裝。

2.安裝完node後開始全局安裝gulp, 在命令行輸入命令 npm install -g gulp ,安裝成功後就能夠在命令行輸入gulp相關的命令了，例如gulp -v查看當前版本號。（npm安裝不成功建議在命令前加sudo 或將 npm 換 cnpm 再試試）

3.在項目中安裝 npm install --save-dev gulp，安裝成功後就能夠開始寫配置文件了。

4.在項目根目錄中建立文件  gulpfile.js

如下是簡單的gulpfile.js  demo代碼

代碼這種東西一開始不會寫，就先抄，抄着抄着就懂怎麼寫了。

//引入插件 var gulp = require('gulp'); var less = require('gulp-less');//須要npm install --save-dev gulp-less var paths = ['./css/*.less'];　　//定義一個數組，指定文件路徑 
//下面開始編寫一個任務 //less編譯任務 gulp.task('less', function() { //建立一個gulp任務，任務名字是'less'，而後一個回調函數 return gulp.src(paths)　　　　//gulp任務操做的源文件'paths' .pipe(less()) //執行less編譯 .pipe(gulp.dest('./css')); //gulp任務輸出的新文件 }); //watch監放任務 gulp.task('watch', function(){ //建立第二個gulp任務，任務名字是‘watch',而後一個回調函數 gulp.watch(paths,['less']); //gulp的watch監聽，文件改動後當即從新執行less任務 可參考http://www.gulpjs.com.cn/docs/api/ }); //gulp.watch('default',['less']); gulp.task('default', ['less','watch']);　　//gulp的default任務，至關於glup的執行入口。而後把less任務和watch放進來，該腳本就會執行這兩個任務

 

把以上代碼寫入gulpfile.js 後保存，而後項目根路徑下執行命令 

gulp

就開始執行gulp完成你安排的任務。

平常開發中須要gulp作的有不少如合併文件（gulp-concat）壓縮（gulp-uglify）重命名（gulp-rename）等等。

這就須要本身編寫task來讓gulp來執行。

最後總結一下，寫好一個gulpfile.js很簡單，結合demo代碼和下面五個命令

gulp.task(name, fn)//新建一個gulp任務，name是任務名，fn回調函數

gulp.run(tasks...)//儘量多的並行運行多個task 新版本中的gulp中使用run會發出警告，這樣的狀況下咱們能夠用start代替

gulp.watch(glob, fn//)當glob內容發生改變時，執行fn

gulp.src(glob)//返回一個可讀的stream

gulp.dest(glob)//返回一個可寫的stream

 須要更多的說明或者操做能夠去下面的網站逛一逛

gulp官方網址：http://gulpjs.com

gulp插件地址：http://gulpjs.com/plugins

最後簡單寫就幾個經常使用的gulp task，方便往後調用

1、壓縮css

var minifycss = require('gulp-minify-css');//引用插件，需npm install --save-dev gulp-minify-css

gulp.task('minifycss', function() {
return gulp.src('src/css/*.css') //壓縮的文件
.pipe(minifycss()) //執行壓縮
.pipe(gulp.dest('dst/css')); //輸出文件夾
});

2、壓縮js

 

var concat = require('gulp-concat'), uglify = require('gulp-uglify'), rename = require('gulp-rename');　　//引用插件，需npm install --save-dev xxxxxx gulp.task('minifyjs', function() { return gulp.src('src/*.js')　　//操做的源文件 .pipe(concat('main.js')) //合併全部js到main.js  .pipe(gulp.dest('minified/js')) //輸出main.js到文件夾  .pipe(rename({suffix: '.min'})) //rename壓縮後的文件名  .pipe(uglify()) //壓縮  .pipe(gulp.dest('minified/js')); //輸出  });

 

 3、清空輸出目錄

var=require'del'function() { return del(['dst']);　　//'dst'是一個目錄 });

4、壓縮圖片

 

const imagemin = require('gulp-imagemin');
 
gulp.task('default', function(){ return gulp.src('src/images/*') .pipe(imagemin()) .pipe(gulp.dest('dist/images')); });

 

5、壓縮html

 

var gulp = require('gulp'), htmlmin = require('gulp-htmlmin'); gulp.task('htmlMin', function () { var options = { removeComments: true,//清除HTML註釋 collapseWhitespace: true,//壓縮HTML collapseBooleanAttributes: true,//省略布爾屬性的值 <input checked="true"/> ==> <input /> removeEmptyAttributes: true,//刪除全部空格做屬性值 <input id="" /> ==> <input /> removeScriptTypeAttributes: true,//刪除<script>的type="text/javascript" removeStyleLinkTypeAttributes: true,//刪除<style>和<link>的type="text/css" minifyJS: true,//壓縮頁面JS minifyCSS: true//壓縮頁面CSS  }; gulp.src('src/*.html') .pipe(htmlmin(options)) .pipe(gulp.dest('dst')); });

 

6、合併文件

 

var concat = require('gulp-concat'); gulp.task('concat', function () { gulp.src('src/js/*.js') .pipe(concat('all.js'))//合併後的文件名 .pipe(gulp.dest('dist/js')); });

 

7、css自動處理瀏覽器前綴,如添加-webkit-解決瀏覽器兼容問題

 

var autoprefixer = require('gulp-autoprefixer'); gulp.task('autoprefixer', function () { gulp.src('css/index.css') .pipe(autoprefixer()) .pipe(gulp.dest('dist/css')); });

 

 

轉自：http://www.cnblogs.com/BillyQin/archive/2016/12/04/6130440.html