接到新的项目后,首先我们要根据psd还原设计师的劳动成果,如果用了css预处理器less或者sass,koala编译,然后手动刷新浏览器来查看效果...不仅费时,而且费力,导致开发效率低下......
那么有没有什么能帮助我们解放'双手'呢? 当然有啦,那就是gulp
关于gulp的介绍以及详细的用法可以参照 https://www.gulpjs.com.cn/
1.在项目根目录下 运行 npm init 会创建一个package.json
- package.json里会记录你项目所用的依赖
2.在package.json的同级(也就是项目的根目录下)手动创建一个gulpfile.js文件
- 名字必须为 gulpfile
3.全局/局部 安装gulp
- --全局安装
npm install gulp -g或者cnpm install gulp -g - --局部安装
npm install gulp --save-dev或者cnpm install gulp --save-dev - 如果通过npm指令安装gulp失败,可以换成淘宝镜像cnpm来安装
4.分别安装如下代码中项目所需要的依赖
5.chrome应用商店安装liveReload插件
-
安装成功会有如图所示的小图标
image.png
6.在gulpfile.js里面引入gulp
贴一下我的配置
//获取gulp
var gulp = require('gulp'),
// 获取 less 模块（用于编译 less）
less = require('gulp-less'),
// 获取 uglify 模块（用于压缩 JS）
uglify = require('gulp-uglify'),
// 获取 css 模块（用于压缩 css）
cssUglify = require('gulp-minify-css'),
// 获取 imagemin 模块（用于压缩 img）
imageMin = require('gulp-imagemin'),
livereload = require('gulp-livereload'),
connect = require('gulp-connect'); //首先需要在gukpfile.js中require这个插件，不要忘记了在项目中npm install
// 由于index页面在最外层 所以单独自动刷新
gulp.task('index', function () {
gulp.src('index.html')
.pipe(connect.reload()) //服务器同步
})
// page下面所有的html页面 刷新
gulp.task('html', function () {
gulp.src('page/**')
.pipe(connect.reload()) //服务器同步
})
// 编译less
gulp.task('less', function () {
gulp.src('less/**')
.pipe(less())
.pipe(gulp.dest('css'))
.pipe(connect.reload()) //服务器同步
})
// 压缩 css 文件
gulp.task('css', function () {
gulp.src('css/**')
.pipe(cssUglify())
.pipe(gulp.dest('dist/css'))
.pipe(connect.reload()) //服务器同步
})
// 压缩 js 文件
gulp.task('js', function () {
// 1. 找到文件
gulp.src('js/**')
// 2. 压缩文件
.pipe(uglify({
mangle: false
}))
// 3. 另存压缩后的文件
.pipe(gulp.dest('dist/js'))
.pipe(connect.reload()) //服务器同步
})
// 压缩img
gulp.task('images', function () {
gulp.src('images/**')
.pipe(imageMin({
progressive: true
}))
.pipe(gulp.dest('dist/images'))
.pipe(connect.reload()) //服务器同步
})
// 监听文件修改，当文件修改则执行less任务
gulp.task('watch', function () {
gulp.watch('less/**', ['less']);
gulp.watch('css/**', ['css']);
gulp.watch('js/**', ['js']);
gulp.watch('index.html', ['index']);
gulp.watch('page/**', ['html']);
})
//定义livereload任务
gulp.task('connect', function () {
connect.server({
port: '8888', //定义端口号
livereload: true
});
});
gulp.task('default', ['less', 'css', 'js', 'images', 'watch', 'connect'])
这里我分别定义
htmllesscssjsimages等多个任务,最后这些任务都添加到default任务中,我们只需要运行gulp就可以执行所有任务
image.png
修改html,css,js等代码,liveReload会推送到界面,并执行自动刷新
然后在地址栏里输入localhost:8888,体验gulp之旅
