自动化构建工具--gulp的初识和使用 - Anderson_An
gulp
首先：什么是gulp?
gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；她不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用她，我们不仅可以很愉快的编写代码，而且大大提高我们的工作效率。
安装使用示例：
首先新建一个文件夹：music
然后安装淘宝镜像 cnpm，当然直接用npm也可以；
初始化文件夹并一路回车： cnpm init
会自动生成一个package.json 的文件
然后执行cnpm install 会自动生成一个文件夹：node_modules，并将开发环境所需要的相关依赖文件包全部下载到node_modules 文件夹下：
如果该文件删除，重新执行该命令，可以重新加载相关依赖：
安装gulp：
$ cnpm install gulp –save-dev
-save-dev和–save的区别
- 会把gulp包安装到node_modules目录中
- 会在package.json的dependencies属性下添加gulp
- 之后运行npm install命令时，会自动安装gulp到node_modules目录中
- –save—之后运行npm install –production或者注明NODE_ENV变量值为production时，会自动安装gulp 到node_modules目录中(开发完后需要用到依赖包，如jquery等)
- –save-dev–之后运行npm install –production或者注明NODE_ENV变量值为production时，不会自动安装gulp 到node_modules目录中（发布后用不到它，而只是在我们开发才用到它
手动新建一个gulpfile文件并配置：
简单测试配置如下：
var gulp = require("gulp"); //压缩图片的插件： var imagemin = require("glup-imagemin"); var folfer = { src : "./src/", build : "./build/", } //流读取文件 task running grunt gulp.task("image",function(){ console.log(111); gulp.src( "src/image/*") .pipe(imagemin()) .pipe(gulp.dest("build/image")) })
需要在终端安装gulp相关插件：
cnpm install gulp-imagemin –save-dev
之后就可以按需求压缩图片的命令了~！
另外扩展，一个插件，gulp-newer 用来检测是否有新的文件，如果是新文件，就进行压缩，如果不是新的就不执行压缩：
cnpm install gulp-newer –save-dev
相关gulpfile.js 中的配置：
var newer = require("gulp-newer"); gulp.task("image",function() { gulp.sec("src/image/*") .pipe( newer("image")) .pipe(imagemin()) .pipe(gulp.dset("build/image")) })
更多插件安装使用示例如下：
在本地文件夹下载插件：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/"))
});
已经配置好的gulpfile文件，参考如下：
/** * Created by 13 **/ var gulp = require(\'gulp\'); var clone = require(\'gulp-clone\'); var htmlmin = require(\'gulp-htmlmin\'); var gulpif = require(\'gulp-if\'); var cssmin = require(\'gulp-minify-css\'); var uglify = require(\'gulp-uglify\'); var useref = require(\'gulp-useref\'); var clean = require(\'gulp-clean\'); var imagemin = require(\'gulp-imagemin\'); //压缩html gulp.task(\'html\', function () { var options = { removeComments: true, //清除HTML注释 collapseWhitespace: true, //压缩HTML collapseBooleanAttributes: false, //省略布尔属性的值 <input checked="true"/> ==> <input checked /> removeEmptyAttributes: false, //删除所有空格作属性值 <input id="" /> ==> <input /> removeScriptTypeAttributes: true, //删除<script>的type="text/javascript" removeStyleLinkTypeAttributes: true, //删除<style>和<link>的type="text/css" minifyJS: true, //压缩页面JS minifyCSS: true //压缩页面CSS }; return gulp.src(\'dev-pages/*.html\') .pipe(htmlmin(options)) .pipe(gulp.dest(\'pages/\')); }); //压缩js gulp.task(\'jsmin\', function() { return gulp.src([\'dev-source/js/ajax.js\',\'dev-source/js/ajax_my.js\']) .pipe(uglify({ mangle: false })) .pipe(gulp.dest(\'source/js/\')) }) // 拷贝图片文件 gulp.task(\'image-copy\', function () { return gulp.src(\'source-dev/webslice/**/*\') .pipe(clone()) .pipe(gulp.dest(\'source/webslice\')); }); gulp.task(\'image-min\', function () { return gulp.src(\'dev-source/images/*.{png,jpg}\') .pipe(imagemin()) .pipe(gulp.dest(\'source/images/\')); }); //先复制图片到source，然后再执行压缩。 gulp.task(\'image-min2\', [\'image-copy\'], function () { return gulp.src(\'source/webslice/**/*\') .pipe(imagemin()) .pipe(gulp.dest(\'source/webslice/\')); }); gulp.task(\'image-min3\', function () { return gulp.src(\'dev-source/webview/img/*.{png,jpg}\') .pipe(imagemin()) .pipe(gulp.dest(\'source/webview/img/\')); }); //压缩图片 gulp.task(\'images-min\',[\'image-min\',\'image-min2\',\'image-min3\'],function() {}) //监听两个文件的文件变化 gulp.task(\'listenPages\', function() { gulp.watch(\'dev-pages/*.html\',[\'html\']); gulp.watch(\'dev-source/js/*.js\',[\'jsmin\']); }); // 构建任务流 // 执行 task build gulp.task(\'build\', [\'html\', \'image-min\',\'jsmin\']);
版权声明：本文为Anderson-An原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。