gulp 使用教程

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

推荐阅读更多精彩内容