前段时间使用了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)也可以实现自动更新。
想想这边更新着代码,那边电脑自动更新页面,是不是很炫酷,苦逼前端开发者装逼必备。
最后放一个效果图。嘻嘻