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包 因为这个包提供了一些apivar 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']);});