gulp相关命令及操作

安装好node.js
window+r键：cmd
1、先进入到你本地项目目录下:(1)f: (2)cd 一个文件夹
2、建一个项目，其名称叫作“mySass”:mkdir mySass
3、cd mySass进入文件内
4、npm init 根据出来的问题写入文件名、版本、描述、作者
5、dir 可查看文件夹里的内容，看到生成了一个package.json文件
6、打开编辑器，打开创建项目的目录，可看到json形式的文件
7、npm install gulp –save-dev 安装gulp开发依赖：在package.json文件内多了一行内容（”gulp”: “^3.9.1”）指明了gulp依赖
8、删除项目文件夹中除了package.json文件的所有文件
9、npm install 发现被删除的东西又重新出现在文件夹内：因为已经声明了gulp依赖
10、gulp复制：
在编辑器创建一个JS文件：
var gulp = require (“gulp”);
gulp.task(“copy_index”,function(){
return gulp.src(“index.html”).pipe(gulp.dest(“dest”));
})
“dest”是保存地址，”index.html”是要复制的文件
在命令端输入：gulp copy_index即可在项目内看见已复制的文件
复制文件夹里的内容：”文件夹名/*”(文件夹里所有内容，包括子文件夹，但不包括子文件夹里的内容)
同时复制多个文件：将要复制的文件写咸亨数组的形式
复制时排除不想要的文件：!文件名
11、gulp依赖：
gulp.task(“build”,[写入要依赖的任务]，function(){})
先同时完成所有依赖的任务后再完成本身的任务
12、gulp监听：
gulp.task(“watch”,function(){
gulp.watch(“文件名”，[关于此文件的任务]);})
在命令端执行任务，只要文件发生变化就执行任务，直至取消监听（ctrl+c)
13、gulp下sass文件转化成css文件：
<1>在命令端安装sass插件：npm install gulp-sass –save-dev 可以在node-modules文件夹内查看到gulp-sass文件，在package.json文件内出现gulp-sass版本
<2>在gulpfile.js中：
var sass = require(“gulp-sass”);
gulp.task(“sass”,function(){ return gulp.src(“要转化的文件”).pipe(sass()).pipe(gulp.dest(“存放的目录”));})
<3>在命令端输入：gulp sass
14、gulp下less文件转化成css文件：
<1>在命令端安装less插件：npm install gulp-less –save-dev
<2><3>同sass转化,把所有sass改成less
15、gulp下浏览器运行：
<1>在命令端安装connect插件：npm install gulp-connect –save-dev
<2>在gulpfile.js中：
var connect = require(“gulp-connect”);
gulp.task(“server”,function(){connect.server({root:”文件根目录”});})
<3>在命令端输入：gulp connect
<4>在浏览器输入命令端显示的地址
16、gulp下浏览器实时刷新：
<1>在server任务中添加属性：
connect.server({root:”文件根目录”，liveload:ture});
<2>在浏览器刷新依据的任务下添加管道：.pipe(connect.reload());
<3>创建一个默认任务：gulp.task(“default”,[“serve”,”watch”])
<4>在命令端运行任务：ctrl+c先停止服务器。输入gulp，浏览器根据页面变化实时刷新
17、gu lp下合并文件：
安装插件：concat
在gulpfile.js中包含进插件
创建任务：gulp.task(“任务名”，function(){return gulp.src([“要合并的文件名”,”要合并的文件名”,]).pipe(concat(“合并后的文件名”)).pipe(gulp.dest(“存放目录”))})
在命令端运行任务：gulp 任务名
18、gulp下压缩js文件使最小化：
安装插件：uglify
在gulpfile.js中包含进插件
在合并文件的任务中concat管道后添加一个管道：.pipe(uglify())
在命令端运行任务：gulp 任务名
19、gulp下重命名：
安装插件：npm install gulp-rename –save-dev
在gulpfile.js中包含进插件:var rename = require(“gulp-rename”);
将一个已经合并命名输出后的文件压缩后重命名再输出：
在压缩管道后添加一个重命名管道–.pipe(rename(“文件新名”))
在命令端运行任务
20、gulp下压缩css文件使最小化：
安装插件：minify-css
在gulpfile.js中包含进插件 :var minifyCSS = require(“gulp-minify-css”);
在转化成css文件的任务中转化管道后添加一个压缩管道：.pipe(minifyCSS())
在命令端运行任务
21、gulp下优化图像尺寸：
安装插件：imagemini
在gulpfile.js中包含进插件
在任务中加入优化管道：.pipe(imagemini())
在命令端运行任务