gulp简单笔记

安装

新建配置文件

init ```
1
入口文件``` entry point ``` 为 ``` gulpfile.js

全局安装gulp
安装gulpfile.js require的所有依赖(gulp-imagemin要使用npm安装 防止压缩报错)

gulpfile.js:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
var gulp = require('gulp'),
less = require('gulp-less'),
cleanCSS = require('gulp-clean-css'), //压缩css
changed = require('gulp-changed'),
ugLify = require('gulp-uglify'),
concat = require('gulp-concat'),
imagemin = require('gulp-imagemin'),//压缩图片
pngquant = require('imagemin-pngquant'), // 深度压缩
browserSync = require("browser-sync").create();

// 实时编译less
gulp.task('less', function () {
gulp.src(['src/less/*.less'])
.pipe(less())
.pipe(cleanCSS()) //压缩css
.pipe(gulp.dest('src/css'))
});

// 压缩js
gulp.task("script", function () {
gulp.src(['js/zepto.min.js', 'js/swiper.jquery.min.js'])
.pipe(changed('src/js', { hasChanged: changed.compareSha1Digest }))
.pipe(concat('index.js'))
.pipe(ugLify())
.pipe(gulp.dest('src/js'))
.pipe(browserSync.reload({ stream: true }));
});

// 压缩图片
gulp.task('images', function () {
gulp.src('src/images/*.{png,jpg,gif}')
.pipe(imagemin({
progressive: true,
svgoPlugins: [{ removeViewBox: false }],//不要移除svg的viewbox属性
use: [pngquant()] //使用pngquant深度压缩png图片的imagemin插件
}))
.pipe(gulp.dest('src/img'))
.pipe(browserSync.reload({ stream: true }));
});

//启动热更新
gulp.task('serve', function () {
gulp.start('script', 'less'); //开启没有解压images
browserSync.init({
port: 2017,
server: {
baseDir: ['src']
}
});
gulp.watch('src/js/*.js', ['script']); //监控文件变化,自动更新
gulp.watch('src/less/*.less', ['less']);
gulp.watch('src/images/*.{png,jpg}', ['images']);
});

gulp.task('default', ['serve']);

启动

gulp