gulp入门教学

首先第一步 安装gulp node

压缩js文件

  再去安装 gulp-uglify
  创建gulpfile.js
  创建压缩后放文件的位置(a)
  创建需要压缩的文件位置(b)
  进入gulpfile.js 编辑代码
  var gulp = require('gulp')
  <!-- 压缩文件的插件引入一下 -->
  var uglify = require('gulp-uglify')
  gulp.task('script',function(){
  gulp
      .src(“压缩文件的位置（b）“
      .pipe(uglify())
      .pipe(gulp.dest("目标位置")
  })

#压缩CSS文件

安装gulp-minify-css
引用
 var gulp = require(gulp)
var minifycss= require(gulp-minify-css)
gulp.task('css',function(){
   gulp
        .src('css初始文件的位置')  
        .pipe(minifycss());
        <!-- 保存位置 -->
        .pipe(gulp.dest(css新的文件储存位置))
  })

#压缩images文件

      安装 gulp-imagemin
      引用
      var gulp = require(gulp)
      var imagemin = require('gulp-imagemin')
      gulp.task('images',function(){
         gulp
              .src('images初始文件的位置')  
              .pipe(imagemin({
                progressive:true
                }))
              <!-- 保存位置 -->
              .pipe(gulp.dest(图片储存席位置))
        })  

#less 压缩和CSS同理 只是插件方法不一样

安装gulp-less
var gulp=require(gulp)
var less= require(gulp-less)
gulp.task('css',function(){
   gulp
        .src('css初始文件的位置')  
        .pipe(less())
        <!-- 保存位置 -->
        .pipe(gulp.dest(css新的文件储存位置))
  })

#创建一个自动检测文件修改并且输入gulp 可以自动运行项目的压缩；

<!-- 适配ES6的方法 -->
安装一个

npm i -D gulp-babel
npm i -D babel-core
npm i -D babel-preset-env
vim .babelrc

文件根目录下面创建一个.babelrc 文件里面存储一个
{
  "presets":["env"]
}

<!-- 监听文件修改，挂在后台 -->

gulp.task('auto',function(){
    gulp.watch('初始文件的位置路径',['需要执行的方法(script)'])
    gulp.watch('初始文件的位置路径',['需要执行的方法(css)'])
    gulp.watch('初始文件的位置路径',['需要执行的方法(images)'])
  })
  <!-- 创建默认方法  -->
gulp.task('default',['script','images'],['css'])