【gulp 使用教程】
/*
* @Author: Robyn
* @Date: 2018-04-04 14:22:59
* @Last Modified by: Robyn
* @Last Modified time: 2018-04-04 15:04:11
* 案例源码：https://github.com/Robynnnn/gulp--.git
*/
一、温馨提示
1.1 使用此教程前需自身已经熟悉 node 以及 npm 基础命令，PC端已经具备Node环境
二、原始目录结构
changsha(project name)
│
└─── src
│ │
│ └───css
│ │
│ └───js
│ │
│ └───images
│ │
│ │ *.html( all html )
│ │
│ gulpfile.js
│ package-lock.json
│ package.json
│ README.md
三、初始化
npm i
四、执行
4.1 clean dist
gulp clean
4.2 build
gulp build
4.3 open static server
gulp
五、gulpfile.js 详解
5.1 声明引入插件
code :
var gulp = require('gulp'),
sass = require('gulp-sass'),
autoprefixer = require('gulp-autoprefixer'),
minifycss = require('gulp-minify-css'),
uglify = require('gulp-uglify'),
imagemin = require('gulp-imagemin'),
pngquant = require('imagemin-pngquant'),
notify = require('gulp-notify'),
gulpSequence = require('gulp-sequence'),
del = require('del'),
babel = require('gulp-babel'),
gutil = require('gulp-util'),
connect = require('gulp-connect');
end
5.2 压缩js
code :
gulp.task('min-js', function () { //'min-js'是任务名称，可更改
gulp.src('./changsha/src/**/*.js') //找到项目的 src 目录下的所有 js
// 将 es6 转换成 es5
.pipe(babel({
presets: ['es2015']
}))
.pipe(uglify()) //压缩
// 将错误信息转换成人类看的懂的语言
.on('error', function (err) { gutil.log(gutil.colors.red('[Error]'), err.toString()); })
// 管道输出目录到 项目的 dist目录下
.pipe(gulp.dest('./changsha/dist/'))
// 每完成一个提示动作完成 （如果不喜欢可以注释或者删除，若注释或者删除，请操作后记得在上面的命令后加上分号。代表结束）
.pipe(notify({
message: 'min-js task complete'
}));
});
end
5.3 压缩css
code :
gulp.task('min-css', function () {
gulp.src('./changsha/src/**/*.css')
.pipe(minifycss()) //执行压缩css动作
.pipe(gulp.dest('./changsha/dist/')) //输出目录
.pipe(notify({
message: 'min-css task complete'
}));
});
end
5.4 编译scss
code :
gulp.task('sass', function () {
return gulp.src(['./changsha/src/**/*.scss'])
// scss 编译
.pipe(sass())
// 自动添加浏览器后缀
.pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
//将编译后的 css 压缩
.pipe(minifycss())
.pipe(gulp.dest('./changsha/dist/'))
// 服务器重新加载
.pipe(connect.reload());
});
end
5.5 图片压缩
code :
gulp.task('images', function () {
gulp.src('./changsha/src/**/*.{png,jpg,gif,ico}')
.pipe(imagemin({
progressive: true,
svgoPlugins: [{removeViewBox: false}],//不要移除svg的viewbox属性
use: [pngquant()] //使用pngquant深度压缩png图片的imagemin插件
}))
.pipe(gulp.dest('./changsha/dist/'));
});
end
5.6 清除
code :
gulp.task('clean', function (cb) {
del(['./changsha/dist/css', './changsha/dist/js', './changsha/dist/images','./changsha/dist/scss','./changsha/dist'], cb)
});
end
5.7 静态服务器搭建
code :
gulp.task('serve', function () {
connect.server({
root: './changsha/',//启动HTTP服务器,要指定根目录
livereload: true,
port: 8080
});
});
gulp.task('html', function () {
gulp.src('./changsha/**/*.html')
.pipe(connect.reload());
});
end
5.8 监听变化
code :
gulp.task('watch', function () {
gulp.watch(['./changsha/src/js/*.js', './changsha/**/*.html'], ['html']);
gulp.watch([
'./changsha/src/css/*.css'
]);
gulp.watch('src/images/**/*', ['images']);
});
end
5.9 设置默认命令
code :
gulp.task('default', ['serve', 'watch']);
//生产环境
gulp.task('build', function (cb) {
gulpSequence(['images', 'min-js', 'min-css','sass'], cb)
});
上面的两条命令就是一开始执行的 gulp 以及 gulp build ，如果觉得繁琐，可以修改相应名字
