【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
 */

• 【gulp 使用教程】
  • 一、温馨提示
    • 1.1 使用此教程前需自身已经熟悉 node 以及 npm 基础命令，PC端已经具备Node环境
  • 二、原始目录结构
  • 三、初始化
  • 四、执行
    • 4.1 clean dist
    • 4.2 build
    • 4.3 open static server
  • 五、gulpfile.js 详解
    • 5.1 声明引入插件
    • 5.2 压缩js
    • 5.3 压缩css
    • 5.4 编译scss
    • 5.5 图片压缩
    • 5.6 清除
    • 5.7 静态服务器搭建
    • 5.8 监听变化
    • 5.9 设置默认命令

一、温馨提示

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 ，如果觉得繁琐，可以修改相应名字