最近的時間都在使用框架寫專案,閒來無聊把gulp又回顧了一遍，使用起來還是很方便的。

這裡是我的專案結構

這裡我主要實現了less編譯、css補全瀏覽器字首、js壓縮、瀏覽器自動重新整理幾項常用的功能。

第一步、全域性安裝 gulp npm install gulp -g

               本地安裝 npm install --save-dev gulp

第二部、新建gulpfile.js

var gulp = require('gulp');
//預設執行
gulp.task('default', function() {
});

第三部、執行gulp，但是這裡怎麼都不會執行只是完成了基本的配置，想要gulp完成更多操作，請看後續的更多操作。

下面開始是css操作

安裝gulp-less 

npm install gulp-less

安裝 gulp-autoprefixer 

npm install gulp-autoprefixer

gulpfile.js中引入

var gulp = require('gulp'),//本地安裝gulp
	less = require("gulp-less"), //less外掛
	autoprefixer = require('gulp-autoprefixer'); //補全瀏覽器字首

gulp.task('less', function() {
	gulp.src('less/*.less')
		.pipe(less())
		.pipe(autoprefixer({
			browsers: ['last 20 versions']
		}))
		.pipe(gulp.dest('css'))
});
 

然後寫一個less檔案測一下，下面是我寫的less檔案

body{
    background-color: blueviolet;
    width: 100%;
    height: 100%;
}
.div{
    background-color: red;
    width: 100px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    right: 0;
    span{
        font-size: 16px;
        color: #fff;
    }
}
 

執行gulp less發現檔案已經生成

body {
  background-color: blueviolet;
  width: 100%;
  height: 100%;
}
.div {
  background-color: red;
  width: 100px;
  height: 100px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  position: fixed;
  top: 0;
  right: 0;
}
.div span {
  font-size: 16px;
  color: #fff;
}

但是這樣會不會太麻煩了點，每次編輯完後都要執行一步操作。

下面我們就來實現瀏覽器自動重新整理功能，我們就可以放心寫專案了

引入gulp-connect和open

var connect = require('gulp-connect');//引入gulp-connect模組  監聽
var open = require('open');//引入open模組，注意不是gulp-open
var rootPath = "./";//根據實際情況定義

來一個監聽

gulp.task('html',function(){
	gulp.src(rootPath+'view/*.html')
	.pipe(connect.reload());
})
gulp.task('css',function(){
	gulp.src(rootPath+'css/*css')
	.pipe(connect.reload());
})

gulp.watch(rootPath+'less/*.less',['less']);//檢測less改變觸發 gulp less
gulp.watch(rootPath+'view/*.html',['html']);//監聽html改變
gulp.watch(rootPath+'css/*.css',['css']);//監聽css改變

建立本地服務

gulp.task("serve",function(){
	connect.server({
		root:rootPath,
		livereload:true,
		port:8082
	});
	open('http://localhost:8082/view');
})

預設檔案我這樣寫

gulp.task('default',['serve']);

現在我們執行 $ gulp操作 看一下效果，大功告成，這樣開發速度大大提升了呢！

最後還有一個js壓縮方法類似less 用的是 gulp-uglify 

安裝 npm install gulp-uglify

使用：

gulp.task('script', function() {
    gulp.src('root_js/*.js')
        .pipe(uglify({ mangle: false }))
        .pipe(gulp.dest('js'))
})

監聽：

gulp.watch(rootPath+'root_js/*.js',['script']);//檢測js變化
gulp.task('js',function(){
	gulp.src(rootPath+'js/*js')
	.pipe(connect.reload());
})

注意！每次對gilpfile.js做完修改都要重新開啟服務。