使用Gulp定制前端开发环境

1.安装package.json中依赖了的组件

npm install

2.来到本地路径，创建工程配置文件

npm init

3.本地安装gulp

npm install gulp --save-dev

4.复用功能的插件

npm install gulp-file-include --save-dev

5.合并文件的插件

npm install gulp-concat --save-dev

6.压缩css文件的插件

npm install gulp-cssmin --save-dev

7.安装服务的插件

npm install gulp-connect --save-dev

8.自动打开浏览器的插件

npm install gulp-open --save-dev

9.配置 gulpfile.js

var gulp = require('gulp'),  // 引入gulp
	fileinclude = require('gulp-file-include'), // 复用功能
	concat = require('gulp-concat'), // 合并
	cssmin = require('gulp-cssmin'), // 压缩
	connect = require('gulp-connect'), // 安装服务
	gulpopen = require('gulp-open'), // 自动打开浏览器
	os = require('os') // 用于检测环境,nodejs内置组件

// 运行环境的检测 处理兼容问题
var browser = os.platform() === 'linux' ? 'google-chrome' : (
	os.platform() === 'darwin' ? 'google chrome' : (
			os.platform() === 'win32' ? 'chrome' : 'chrome'
		)
	)

// 合并HTML
gulp.task('fileinclude',function(done) {
	gulp.src('src/views/*.html')
	.pipe(fileinclude({
		prefix: '@@',
		basepath: '@file'
	}))
	.pipe(gulp.dest('dist/views'))
	.on('end',done)
})

// 合并、压缩CSS
gulp.task('cssmin',function(done){ // 定义任务
	gulp.src(['src/css/*.css']) // 找对象
		.pipe(concat('style.min.css')) // pipe管道
		.pipe(cssmin())
		.pipe(gulp.dest('dist/css/'))
		.on('end',done)
})

// 拷贝图片
gulp.task('copy:images',function(done){
	gulp.src(['src/images/*'])
		.pipe(gulp.dest('dist/images'))
		.on('end',done)
})

// 配置路径
var host = {
	path: 'dist/',
	port: 8090,
	index: 'qzgcs.html'
}

// 运行web服务器
gulp.task('connect',function() {
	connect.server({
		root: host.path,
		port: host.port,
		livereload: true  // 热更新
	})
})

// 监控文件变化
gulp.task('watch',function(done){
	gulp.watch('src/**/*',['cssmin','fileinclude'])
		.on('end',done)
})

// 自动打开浏览器
gulp.task('open',function(done){
	gulp.src('')
		.pipe(gulpopen({
			app: browser,
			uri: 'http://localhost:8090/views/' + host.index
		}))
		.on('end',done)
})

// 任务组装
gulp.task('default',['fileinclude','cssmin','copy:images'],function(){ // 默认任务  任务集合(没有先后顺序)  回调函数
	// body...
})
// 开发模式
gulp.task('dev',['fileinclude','cssmin','copy:images','connect','watch','open'])

// npm i 安装package.json上的所有 dev
// set 查看环境变量
// set | findstr "NVM"
// on 事件监听机制

结果：$ gulp dev

运行前：

 

运行后：