day34gulp1。Gulp简介Gulp是前端开发过程中构建代码的工具，也是构建自动化项目的工具；不仅可以优化网站资源，还可以作为开发过程中很多重复性工作的正确工具自动完成；使用她，我们不仅可以愉快地编写代码，还可以大大提高我们的工作效率。Gulp是一个基于Nodejs的自动任务运行器。可自动完成javascript/coffee/sass/less/html/image/css等文件的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署生成，监听文件有后重复指定步骤被改变了。在实现上，她借鉴了Unix操作系统的pipe思路。上一级的输出直接成为下一级的输入，操作起来非常简单。Gulp与grunt非常相似，但是相比grunt频繁的IO操作，gulp的流操作可以更快更方便的完成构建工作。2、Gulp环境搭建1）nodeJs安装说明：Gulp是基于nodejs的，当然需要安装nodejs。选择对应的版本（.msi文件）进行测试：按window+r输入cmd回车，然后输入npm-v确保环境变量已经配置好，这样就可以全局使用了。如果想了解环境变量：输入以下地址：https://blog.csdn.net/jiang77...npm的解释：npm是Node.js的包管理器。在Node.js上开发时，会用到很多别人写的JavaScript。代码。如果需要用别人写的包，每次都要根据名字去官网搜索，下载代码，解压，再用，非常麻烦。于是一个集中管理的工具应运而生：大家把自己开发的模块打包放到npm官网。如果他们想使用它们，可以直接通过npm安装来使用，而不管代码存在于何处或应该从哪里下载。更重要的是，如果我们要使用模块A，而模块A依赖于模块B，模块B又依赖于模块X和模块Y，npm可以根据依赖关系下载并管理所有依赖包。否则，我们自己手动管理肯定会很麻烦，而且容易出错。2）安装cnpm由于npm安装插件是从国外服务器下载的，受网络影响较大，可能会出现异常；如果npm服务器在中国就好了，所以我们很高兴分享的淘宝团队就是这样做的。URL：http://npm.taobao.org安装：cmd（命令行）执行：npminstallcnpm-g--registry=https://registry.npm.taobao.orgcnpm-v测试是否安装成功注意：cnpm跟npm的用法完全一样，只是在执行命令的时候把npm改成cnpm（后面的操作都会把npm换成cnpm）3）全局安装gulpcmd命令：cnpminstallgulp-ggulp-v，如果版本号出现，说明全局正确安装了gulp目的是：可以使用gulp命令（就像使用npm命令一样）4）如何在项目中使用gulp（新建项目的步骤）1.新建一个package.json配置文件（初始化一个项目）cmd命令：cnpminit一路回车，在项目文件夹下会生成一个package.json文件2.在本地安装gulp（在项目目录下安装gulp）这一步的目的就是将gulp中的所有js文件从服务器下载到项目目录下；在该目录下执行cmd（命令行）：cnpminstallgulp--save-dev安装完成后会在项目目录下生成一个node_modules文件3.使用gulp在项目根目录下创建gulpfile.js即可通过在js文件中编写js代码来使用它。gulp.task("任务名称",回调函数);gulp.src("源文件路径");gulp.src()是读取要处理的文件，即源文件gulp.dest("destinationpath");gulp.dest()是处理文件的路径，即目标文件管道（操作）；pipe()管道，如何处理文件（如：sass编译、复制文件、压缩文件等）Nativegulp包括：tasksrcdestwatchnativegulp(4)复制文件constgulp=require("gulp");//gulp本地方法//gulp.task("任务名称",回调函数)gulp.task("_copy",function(){gulp.src("2fs.txt").pipe(gulp.dest("d:/dest"));});//cmd命令行：gulp任务名，如gulp_copy结果：d:/dest2fs.txt文件下载完成，说明复制成功。批量操作：//js目录下的所有目录//注意，该方法只会对js文件夹下的所有文件和文件夹进行赋值，不会对js文件夹本身进行赋值gulp.src("js/**/*")。pipe(gulp.dest("d:/dest"));//复制项目目录下的所有文件（包括子文件夹，不管有多少层）//注意：该方法仍然没有复制项目文件夹，只会复制项目下的文件和文件夹gulp.src("./**/*").pipe(gulp.dest("d:/dest"));项目：day34复制后：listenFilewatchgulp.watch("listenedfile",callbackfunction);gulp.task("_watch",function(){gulp.watch("2fs.txt",function(){gulp.src("2fs.txt").pipe(gulp.dest("d:/dest"));});});本地安装gulp插件npminstallmoduleName将模块安装到项目目录下npminstall-gmoduleNameg表示全局安装模块，具体在磁盘上的位置取决于npmconfig前缀的位置。npminstall-savemoduleName-save表示将模块安装到项目目录下，并在包文件的dependencies节点中写入依赖。npminstall-save-devmoduleName-save-dev表示将模块安装到项目目录下，并在包文件的devDependencies节点写入依赖。Gulp本身只是做了一些文件复制、监控等，但是它提供了很多接口，更多相应的工作都是通过插件来完成的，比如：编译js文件，合并文件，压缩文件，优化图片大小,创建本地开发服务器。下面先介绍一下常用的，更多的gulp插件可以找找。合并文件cmd命令：cnpminstallgulp-concat--save-devconstgulp_concat=require('gulp-concat');gulp.task("_concat",function(){gulp.src(["js/a.js","js/b.js"]).pipe(gulp_concat("tools.js")).pipe(gulp.dest("d:/dest"));});压缩文件cmd命令：cnpminstallgulp-uglify--save-devconstgulp_uglify=require('gulp-uglify');gulp.task("_ugly",function(){gulp.src("tools.js").pipe(gulp_uglify()).pipe(gulp.dest("d:/dest"));});压缩图片cmd命令：cnpminstallgulp-imagemin--save-devconstgulp_imgmin=require('gulp-imagemin');//压缩图片cnpminstallgulp-imagemin--save-devgulp.task("_imgMin",function(){gulp.src("img/**/*").pipe(gulp_imgmin()).pipe(gulp.dest("d:/dest"));});压缩csscmd命令：cnpminstallgulp-minify-css--save-devconstgulp_minCss=require('gulp-minify-css');//压缩CSSgulp.task("_minCss",function(){gulp.src("css/test.css").pipe(gulp_minCss()).pipe(gulp.dest("d:/dest"));});重命名cmd命令：cnpminstallgulp-rename--save-devconstgulp_rename=require('gulp-rename');//合并压缩重命名命名副本gulp.task("_rename",function(){gulp.src(["js/a.js","js/b.js"]).pipe(gulp_concat("tools.js")).pipe(gulp_uglify()).pipe(gulp_rename("tools.min.js")).pipe(gulp.dest("d:/dest"));});ES6到ES5cnpm安装--save-devbabel-preset-es2015cnpminstall--save-devgulp-babel@7babel-corebabel-preset-envconstgulp_babel=require('gulp-babel');gulp.task("_babel",function(){gulp.src("MF.js").pipe(gulp_babel({presets:['es2015']})).pipe(gulp.dest("d:/dest"));});如何将gulp用于正在进行的项目：创建一个空文件夹作为项目文件夹（不要使用gulp作为项目文件夹）使用npm初始化项目：使用npmini命令生成package.json文件（步骤5）在本地安装gulp，将项目当前所有文件复制到新建的项目文件中在文件夹中的项目根目录下编写简化版的gulpfile.js代码：Step1.下载全局gulp命令cnpminstallgulp-g2.cnpminit创建配置文件3.下载gulp模块cnpminstallgulp--save-dev4。在项目根目录下创建gulpfile.js
