使用gulp+browser-sync搭建前端项目自动化以及自动刷新

前段时间使用了gulp+browser-sync才发现这个东西真的很好用。

准备工作：（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

会出现以下提示

运行完后应该可以自动打开一个浏览器。如果没有打开也没有关系，手动打开浏览器输入上面的local地址（即http://localhost:2016）就可以了。如果是同一个网段的电脑（比如连接同一个wifi的笔记本或者手机），可以输入上面的External地址（即http://192.168.100.110:2016）也可以实现自动更新。

 

想想这边更新着代码，那边电脑自动更新页面，是不是很炫酷，苦逼前端开发者装逼必备。

 

最后放一个效果图。嘻嘻