准备工作：
（1）、安装nodejs。gulp是基于nodejs使用的，所以先安装nodejs，https://nodejs.org/en/download/在这里直接下载安装就好。
（2）、新建一个项目目录，比如我在E盘中新建一个文件夹：gulpbrowsersync 。在其中新建一些文件夹或者文件比如style文件夹、js文件夹、images文件夹以及index.html。
开始工作：
1、进入项目目录E:\gulpbrowsersync 中，shift+鼠标右键 选择 在此处打开命令窗口 。创建一个模块（在命令行中输入）。
创建过程中会提示输入一些东西，可以直接回车。
npm init //创建一个模块，会在项目目录中生成一个package.json文件
2、安装gulp（在命令行中输入）。ps:gulp首先需要全局安装一次。
npm install gulp -g
npm install gulp --save -dev
3、安装所需要的几个gulp插件（都是在命令行中输入）
npm install gulp-uglify --save -dev //js压缩插件
npm install gulp-concat --save -dev //js合并插件
npm install gulp-cssnano --save -dev //css压缩插件
npm install gulp-less --save -dev //less文件编译
npm install gulp-imagemin --save -dev //图片压缩插件
npm install gulp-htmlmin --save -dev //html压缩插件
npm install del --save -dev //文件删除模块
4、安装browser-sync（在命令行中输入）
npm install browser-sync --save -dev
5、在项目根目录中新建gulpfile.js文件（重要！！！文件名为固定不变的。）输入以下内容：
'use strict';
var gulp = require('gulp'); //获取gulp
var browsersync = require('browser-sync').create();//获取browsersync
//删除dist目录下文件
var del=require('del');
gulp.task('clean',function(cb){
return del(['dist/*'],cb);
})
//操作js文件
var uglify = require('gulp-uglify'); //js压缩插件
var concat = require('gulp-concat'); //js合并插件
gulp.task('scripts', function() {
gulp.src('js/*.js') //需要操作的源文件
.pipe(uglify()) //压缩js文件
.pipe(concat('app.js')) //把js文件合并成app.js文件
.pipe(gulp.dest('dist/js')) //把操作好的文件放到dist/js目录下
.pipe(browsersync.stream()); //文件有更新自动执行
});
//操作css文件
var cssnano = require('gulp-cssnano'); //css压缩插件
var less=require('gulp-less') //less文件编译
gulp.task('style', function() {
gulp.src('style/*.css')
.pipe(less()) //编译less文件
.pipe(cssnano()) //css压缩
.pipe(gulp.dest('dist/style'))
.pipe(browsersync.stream());
});
var imagemin = require('gulp-imagemin'); //图片压缩插件
gulp.task('image', function() {
gulp.src('images/*.{png,jpg,jpeg,gif}')
.pipe(imagemin())
.pipe(gulp.dest('dist/images'))
.pipe(browsersync.stream());
});
var htmlmin = require('gulp-htmlmin'); //html压缩插件
gulp.task('html', function() {
gulp.src('*.html')
.pipe(htmlmin({
collapseWhitespace: true, //压缩html
collapseBooleanAttributes: true, //省略布尔属性的值
removeComments: true, //清除html注释
removeEmptyAttributes: true, //删除所有空格作为属性值
removeScriptTypeAttributes: true, //删除type=text/javascript
removeStyleLinkTypeAttributes: true, //删除type=text/css
minifyJS:true, //压缩页面js
minifyCSS:true //压缩页面css
}))
.pipe(gulp.dest('dist'))
.pipe(browsersync.stream());
});
gulp.task('serve', ['clean'], function() {
gulp.start('scripts','style','image','html');
browsersync.init({
port: 2016,
server: {
baseDir: ['dist']
}
});
gulp.watch('js/*.js', ['scripts']); //监控文件变化，自动更新
gulp.watch('style/*.css', ['style']);
gulp.watch('images/*.*', ['image']);
gulp.watch('*.html', ['html']);
});
gulp.task('default',['serve']);
注意1：gulp.src()中为操作文件的源文件，有需要可以自己更改；图片更改中后面的为匹配的图片格式，这里只写了几种常见图片格式，有需要可以自己增加。
注意2：如果不是less文件而只是css文件，可以把style中的 .pipe(less()) 注释掉。
6、在之前的命令窗口中输入
gulp
会出现以下提示
1.jpg
运行完后应该可以自动打开一个浏览器。如果没有打开也没有关系，手动打开浏览器输入上面的local地址（即http://localhost:2016）就可以了。如果是同一个网段的电脑（比如连接同一个wifi的笔记本或者手机），可以输入上面的External地址（即http://192.168.100.110:2016）也可以实现自动更新。
最后放一个效果图
2.gif
网友评论