用 gulp 建一個服務器

 

前言：gulp 是一個非常有用的 web前端自動化開發 工具，可以通過配置 gulp task 幫助我們完成許多工作。不僅如此，我們還可以利用 gulp 來建一個簡單的服務器，供我們測試用。下面來看看如何配置：

 

1.首先 創建 pakeage.json 文件（包依賴）

npm init

接着會出現如下，提示（如果不填任何東西，直接按回車直到出現 yes 確認就行，以后也可以修改這個文件）

 

2.安裝 gulp

npm i -D gulp
npm i -D gulp-connect
//or npm i -D gulp gulp-connect
// i -D 等同於 install --save-dev 

 

3.新建 gulpfile.js 文件,並編輯（復制下面內容）

var gulp = require('gulp'),
	connect = require('gulp-connect');

gulp.task('webserver', function() {
	connect.server({
		livereload: true,
		port: 2333
	});
});

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

 

 

4. 在命令行輸入 gulp，接着可以用瀏覽器訪問 localhost:2333，此時文件結構如下圖

 

 

5. 通過手機訪問

1）首先電腦開WiFi，手機連上電腦的WiFi

2）打開命令行（Win+R，輸入cmd ）

3）輸入命令 ipconfig

 

4）記住 ipv4 地址（假如是 192.110.16.1），在手機瀏覽器輸入 192.110.16.1:2333

 

5)點開 demo.html 就可以在手機測試你寫的網頁了

 

 

 

其他

通常還會用 gulp 執行其他任務，比如編譯 sass，less，壓縮 js 文件等

var gulp = require('gulp'),
	connect = require('gulp-connect'),
	uglify = require('gulp-uglify'),
	sass = require('gulp-ruby-sass'),
	autoprefixer = require('gulp-autoprefixer');

gulp.task('webserver', function() {
	connect.server({
		livereload: true,
		port: 2333
	});
});

gulp.task('script', function() {
	gulp.src('js/*.js')
		.pipe(uglify())
		.pipe(gulp.dest('dist/js'));
});

gulp.task('sass', function() {
	return sass('sass/*.scss')
	.on('error', function(err) {
		console.error('sassError!', err.message);
	})
	.pipe(gulp.dest('dist/css'));
});

gulp.task('auto', function() {
	gulp.watch('js/*.js', ['script']);
	gulp.watch('sass/**/*.scss', ['sass']);
});

gulp.task('default', ['webserver','sass', 'script', 'auto']);