安装nodejs

传送门在这

安装成功之后

node -v //查看版本

node-v

npm - v //查看npm版本

npm-v

npm install gulp -g//全局安装gulp

gulp

gulp -v

gulp-v

进入本地项目文件

npm init -y//默认建立一个package.json文件

npm init -y

//这里使用cnpm cnpm和npm一样，唯一不同的区别是cnpm是阿里的npm镜像

cnpm i gulp -D//i===install ， D === --save-dev 本地安装gulp

本地安装gulp

cnpm i gulp-clean-css -D //css压缩所需要的文件

.gulp-clean-css

cnpm i gulp-htmlmin -D//html压缩文件

gulp-htmlmin

cnpm i gulp-uglify -D//js压缩文件

gulp-uglify

cnpm i gulp-babel@7 babel-core babel-preset-env//ES6转ES5代码文件

gulp-babel

cnpm i gulp-connect -D//自动刷新网页文件

gulp-connect

cnpm i gulp-sass -D//sass编译文件

gul-sass

package文件

{
  "name": "sass_index",
  "version": "1.0.0",
  "description": "",
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-preset-env": "^1.7.0",
    "gulp": "^3.9.1",
    "gulp-babel": "^7.0.1",
    "gulp-clean-css": "^3.10.0",
    "gulp-connect": "^5.6.1",
    "gulp-htmlmin": "^5.0.1",
    "gulp-sass": "^4.0.1",
    "gulp-uglify": "^3.0.1"
  }
}

准备工作做好

写网页

写网页这种无聊的事情就不展示，接下来咱们来撸撸gulp的使用，任务定制

定制任务

建立gulpfile.js文档，要定制的任务都保存在这里

引入插件

const gulp = require("gulp"),
    babel = require("gulp-babel"),
    nimifycss = require("gulp-clean-css"),
    htmlmini = require("gulp-htmlmin"),
    uglify = require("gulp-uglify"),
    sass = require("gulp-sass"),
    connect = require("gulp-connect");

//定制任务压缩html
gulp.task("html",()=>{
   gulp.src("./index.html")
   .pipe(htmlmini({ collapseWhitespace: true }))
   .pipe(gulp.dest("dist"))
   .pipe(connect.reload());
});

//定制任务压缩css
gulp.task("css",()=>{
    gulp.src("css/**/*.css")
    .pipe(nimifycss())
    .pipe(gulp.dest("dist/css"))
    .pipe(connect.reload());
});

//定制任务压缩js
gulp.task("js",()=>{
    gulp.src("js/**/*.js")
    .pipe(babel({
        presets:["env"]
    }))
    .pipe(uglify())
    .pipe(gulp.dest("dist/js"))
    .pipe(connect.reload());
});

//定制任务压缩html文件夹下的html文件
gulp.task("html-html",()=>{
    gulp.src("html/**/*.html")
    .pipe(htmlmini({ collapseWhitespace: true }))
    .pipe(gulp.dest("dist/html"))
    .pipe(connect.reload());
});

//定制任务编译sass样式
gulp.task("sass",()=>{
    gulp.src("sass/**/*.scss")
    .pipe(sass({outputStyle:"expanded"}))
    .pipe(gulp.dest("css"))
    .pipe(connect.reload());
});

//定制任务复制图片
gulp.task("imgs-copy",()=>{
    gulp.src("imgs/**/*.*")
    .pipe(gulp.dest("dist/imgs"));
});

//定制任务启动websever服务器
gulp.task("conn",()=>{
    connect.server({
        root:"dist",
        livereload:true
    });
});

//定制监视任务
gulp.task("watch",()=>{
    gulp.watch("index.html",["html"]);
    gulp.watch("css/**/*.css",["css"]);
    gulp.watch("js/**/*.js",["js"]);
    gulp.watch("html/**/*.html",["html-html"]);
    gulp.watch("sass/**/*.scss",["sass"]);
    gulp.watch("imgs/**/*.*",["imgs-copy"]);
});

//定制默认任务
gulp.task("default",
        ["html",
         "css",
         "js",
         "html-html",
         "sass",
         "imgs-copy",
         "watch",
         "conn"
        ]
);

直接gulp运行default默认任务

gulp

压缩后的文件

css js html