gulp安装使用教程,js合并压缩,图片压缩,sass转css

sharembweb 49次浏览
gulp安装使用教程,js合并压缩,图片压缩,sass转css


//处理任务
var gulp = require("gulp");
var imagemin = require("gulp-imagemin");
var ugligfy = require("gulp-uglify");
var sass = require("gulp-sass");
var concat = require("gulp-concat");
/*
常用方法
gulp.task -- 定义任务
gulp.src -- 找到需要执行任务的文件
gulp.dest -- 执行任务的文件的去处
gulp.watch -- 观察文件是否发生变化

安装与使用教程 gulpfile.js文件如下
npm init 运行配置
npm install gulp -g 下载到全局
npm install gulp --save-dev 下载到当前位置
npm install gulp-imagemin --save-dev 下载到当前位置(图片压缩)
npm install gulp-uglify --save-dev 下载到当前位置(JS压缩)
npm install gulp-sass --save-dev 下载到当前位置(sass转换为css)
npm install gulp-concat --save-dev 下载到当前位置(代码合并)

*/

//定义任务
gulp.task("message", function() {
return console.log("Gulp is running!")
})

//执行任务 gulp message

//定义默认任务
gulp.task("default", function() {
return console.log("这是默认的任务,只需要输入gulp即可")
})

//拷贝文件
gulp.task("copyHtml", function() {
gulp.src("src/*.html")
.pipe(gulp.dest("dist"));
})

//图片压缩
gulp.task("imageMin", function() {
gulp.src("src/images/*")
.pipe(imagemin())
.pipe(gulp.dest("dist/images"))
})

//压缩js
gulp.task("minify", function() {
gulp.src("src/js/*.js")
.pipe(ugligfy())
.pipe(gulp.dest("dist/js"));
});

//sass转换为css
gulp.task("sass", function() {
gulp.src("src/sass/*.scss")
.pipe(sass().on("error",sass.logError))
.pipe(gulp.dest("dist/css"));
});

//代码合并
gulp.task("concat",function(){
gulp.src("src/js/*.js")
.pipe(concat("main.js"))
.pipe(ugligfy())
.pipe(gulp.dest("dist/js/"))
});

//监听文件是否发生变化
gulp.task("watch",function(){
gulp.watch("src/js/*.js",["concat"]);
gulp.watch("src/images/*",["imagemin"]);
gulp.watch("src/sass/*.scss",["sass"]);
gulp.watch("src/*.html",["copyHtml"]);
})

//执行多个任务 cmd >> gulp all
gulp.task("all", ["message", "copyHtml", "imageMin", "minify","sass"]);



随机内容

表情

共2条评论
  • 网友评论:

    赞一个

    2020-07-24 16:26:24 回复

  • 网友评论:

    学习了

    2020-07-24 16:26:24 回复

友情链接