Glup的安装与使用
首先：什么是gulp?
gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；她不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用她，我们不仅可以很愉快的编写代码，而且大大提高我们的工作效率。
下载：
少量代码示例：
前提：需下载配置Node.js环境
在本地文件夹下载插件：npm install 插件名 --save-dev
var gulp = require("gulp");//导入glup
var sass = require("gulp-sass");//拷贝并编译scss
var server = require("gulp-connect");//建立服务器
var concat = require("gulp-concat");//合并js文件
var uglify = require("gulp-uglify");//压缩js文件
var minifyCss = require("gulp-minify-css");压缩css
var imagemin = require("gulp-imagemin");压缩图片
var rename = require("gulp-rename");//文件重命名
var rev = require("gulp-rev");//给静态资源文件名添加一个哈希值后缀
var revCollector = require("gulp-rev-collector");//自动添加版本号
var autoprefixer = require("gulp-autoprefixer");//对css添加浏览器后缀
var htmlmin = require("gulp-htmlmin");//对html页面进行压缩
//基本语法
Gulp.task(“任务名称”，执行行数（）{
Return gulp.src(“操作的文件路径”).pipe(插件名【与var定义名字相同】）{
相关参数
})）【可执行操作多个pipe（）处理项】.pipe(gulp.dest(“返回结果的路径”))
})；
gulp.task("addpre",function () {
return gulp.src("src/css/aa.css").pipe(autoprefixer({
browsers:['last 2 versions','Android>=4.0'],
cascade:true
})).pipe(gulp.dest("dist/css"))
})
//同时执行多项任务gulp.task(“合并的任务名”,[“任务1”,”任务2”,”任务3”,...]);
gulp.task("default",["copyindex","copy-img","copy-data"]);
<!--将src下的index页面进行压缩后拷贝到dist目录下-->
gulp.task("copyindex",function () {
return gulp.src("src/index.html").pipe(htmlmin({
minifyCss:true,//压缩css
minifyJS:true,//压缩js
removeComment:true,//压缩代码
collapseWhitespace:true//压缩空白区域
})).pipe(gulp.dest("dist/"))
})
//批量拷贝
// src/images/**/*拷贝images下的所有文件下的所有资源
gulp.task("copy-img",function () {
return gulp.src("src/images/**/*").pipe(imagemin()).pipe(gulp.dest("dist/images/"));
})
//多组拷贝和合并"!src/json/s-*.json"//排除s开头的json文件
//！文件名 表示排除
gulp.task("copy-data",function () {
return gulp.src(["src/json/*","src/xml/*","!src/json/s-*.json"]).pipe(gulp.dest("dist/data/"));
})
//编译scss并拷贝到相关路径
gulp.task("scss-c",function () {
return gulp.src("src/scss/**/*.scss").pipe(sass()).pipe(gulp.dest("dist/css/"));
})
//watch监控数据，一旦文件，立即执行监视任务进行拷贝刷新
gulp.task("watch",function () {
gulp.watch("src/index.html",["copyindex"]);
gulp.watch("src/images/**/*",["copy-img"]);
gulp.watch("src/json/*",["copy-data"]);
})
//建立本地服务器
gulp.task("server",function () {
server.server({
root:"dist"
});
})
//js合并 与 .pipe(uglify())压缩
gulp.task("js",function () {
return gulp.src("src/script**/*").pipe(concat("all.js")).pipe(uglify()).pipe(gulp.dest("dist/js/")).pipe(rename("all-min.js")).pipe(gulp.dest("dist/js/"))
})
//对css进行压缩并创建json文件自动添加版本号
gulp.task("css",function () {
return gulp.src("src/css/*.css").pipe(minifyCss()).pipe(rev()).pipe(gulp.dest("dist/css/")).pipe(rev.manifest()).pipe(gulp.dest("dist/css/"));
});
//用来替换HTML页面上的link标签src路径（方便更改文件名）
gulp.task("rev-collector",function () {
return gulp.src(["dist/css/**/*.json","dist/index.html"]).pipe(revCollector({
replaceReved:true,
})).pipe(gulp.dest("dist/"))
});