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

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

准备工做：（1）、安装nodejs。gulp是基于nodejs使用的，因此先安装nodejs，https://nodejs.org/en/download/在这里直接下载安装就好。

（2）、新建一个项目目录，好比我在E盘中新建一个文件夹：gulpbrowsersync  。在其中新建一些文件夹或者文件好比style文件夹、js文件夹、images文件夹以及index.html,

 

开始工做：

一、进入项目目录E:\gulpbrowsersync  中，shift+鼠标右键 选择 在此处打开命令窗口 。建立一个模块（在命令行中输入）。

   建立过程当中会提示输入一些东西，能够直接回车。

npm init       //建立一个模块，会在项目目录中生成一个package.json文件

 

二、安装gulp（在命令行中输入）。ps:gulp首先须要全局安装一次。

npm install gulp -g
npm install gulp --save -dev

 

三、安装所须要的几个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                  //文件删除模块

 

四、安装browser-sync（在命令行中输入）

npm install browser-sync  --save -dev

 

五、在项目根目录中新建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())  注释掉。

六、在以前的命令窗口中输入

gulp

会出现如下提示

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

 

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

 

最后放一个效果图。嘻嘻