gulp中文API地址:http://www.gulpjs.com.cn/docs/api/
一些gulp插件的介绍:https://juejin.im/entry/55c8dbb160b22a3ebdf34d57
1.新建一个空项目文件夹,cd到该目录下初始化npm配置文件
此时在目录下多出一个package.json文件:
2.接下来我们需要初始化gulp依赖
npm install gulp --save-dev
运行完后会看到项目目录下多了一个node_modules文件夹
并且在package.json里已经加上了dev的gulp属性项:
3.在项目根目录下添加一个gulpfile.js文件,这个是gulp的主文件
4.在gulpfile中抽象我们的任务
要实现这些任务需要安装对应的插件
5.gulpfile.js:
/**
* Created by dyk-pc on 2017/5/31.
*/
'user strict'
//在gulpfile中先载入gulp包 因为这个包提供了一些api
var gulp = require("gulp");
var less = require('gulp-less');
var cssnano = require('gulp-cssnano');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var htmlmin = require('gulp-htmlmin');
var browserSync = require('browser-sync');//浏览器同步
//任务一:Less编译 压缩 合并
gulp.task('style',function () {
//这里是在执行style任务的时候自动执行的
gulp.src('src/styles/*.less')
.pipe(less())//把less编译为css
.pipe(cssnano())//压缩
.pipe(gulp.dest('dist/styles'))
.pipe(browserSync.reload({
stream:true
}))
})
//任务二:Js合并 压缩 混淆
gulp.task('script',function () {
gulp.src('src/scripts/*.js')
.pipe(concat('all.js'))
.pipe(uglify())
.pipe(gulp.dest('dist/scripts'))
.pipe(browserSync.reload({
stream:true
}))
})
//任务三:img复制
gulp.task('image',function () {
gulp.src('src/images/*.*')
.pipe(gulp.dest('dist/images'))
.pipe(browserSync.reload({
stream:true
}))
})
//任务四:html压缩
gulp.task('html',function () {
gulp.src('src/*.html')
.pipe(htmlmin({
collapseWhitespace:true,
removeComments:true
}))
.pipe(gulp.dest('dist'))
.pipe(browserSync.reload({
stream:true
}))
})
//把任务架设在服务器 实现浏览器同步操作
gulp.task('server',function () {
browserSync({
server:{
baseDir:['dist']
},
},function (err,bs) {
});
gulp.watch('src/styles/*.less',['style']);
gulp.watch('src/scripts/*.js',['script']);
gulp.watch('src/images/*.*',['image']);
gulp.watch('src/*.html',['html']);
});