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
运行前：
运行后：
