gulp学习笔记-----项目 （1）

这是我的学习笔记，为了方便查阅，也可以交流学习下，有错误请指正

1.在安装node.js 和git的前提下
2.新建文件夹，命名随意（需英文，最好不要包含特殊字符 如gulp node）
3.在新文件夹中右键，有个git bash here 然后点击进行到命令行
3.输入npm install gulp -g 下载全局的gulp
4.用npm init 初始化一个package.json文件，这个用来记录后面所安装的工具的版本，方便以后使用
5.然后在下载一个局部的gulp，npm install gulp --save-dev 此时查看package。json会发现多了一个gulp和版本号，注意如果全局的gulp下载的版本比较低，则这个也要下载的低一些，我用的是3.9.1，
可以手动的修改package.json 里面的文件，然后npm install 以下就改更改了
6.新建src文件，一般开发文件放在这里面，然后在新建一个dist文件，这个放压缩后的文件
我的具体文件格式是这样的：

还要新建一gulpfile.js文件，创建流程规则具体代码如下
var gulp = require(‘gulp’);

//压缩html
//gulp 中插件的应用 下载插件—》取到插件
var htmlClean = require(“gulp-htmlclean”);

//压缩图片
var imageMin =require(“gulp-imagemin”);

//压缩js文件
var uglify = require(“gulp-uglify”);

//去掉js中的调试语句
var deBug = require(“gulp-strip-debug”);

//将less转换css
var lessCss = require(“gulp-less”);
//压缩css
var cleanCss = require(“gulp-clean-css”);

// postcss autoprofixer
var postcss =require(“gulp-postcss”);
var autoPr =require(“autoprefixer”);

//开启服务器
var connect =require(“gulp-connect”);

var folder ={
src:“src/”,
dist:“dist/”
}
//判断当前的环境变量
var devMod = process.env.NODE_ENV == “development”;
//设置环境变量 export NODE_ENV =development

gulp.task(“html”,function(){
var page= gulp.src(folder.src+“html/")
.pipe(connect.reload());
if(!devMod){//判断处于什么环境变量
page.pipe(htmlClean())
}
page.pipe(gulp.dest(folder.dist+“html/”))
})
gulp.task(“image”,function(){
var page = gulp.src(folder.src+"image/”)
if(!devMod){
page.pipe(imageMin())
}

page.pipe(gulp.dest(folder.dist+"image/"))

})
gulp.task(“css”,function(){
var page = gulp.src(folder.src+“css/*”)
.pipe(connect.reload())
.pipe(lessCss())
.pipe(postcss([autoPr()]))
if(!devMod){
page.pipe(cleanCss())
}

page.pipe(gulp.dest(folder.dist+"css/"))

})
gulp.task(“js”,function(){
var page = gulp.src(folder.src+“js/*”)
.pipe(connect.reload())

if(!devMod){
    page.pipe(deBug())
    .pipe(uglify())
}

page.pipe(gulp.dest(folder.dist+"js/"))

})

//开启服务------建议不要用默认端口8080
gulp.task(“server”,function(){
connect.server({
port:“8888”,
livereload:true
})
})

gulp.task(“watch”,function(){
gulp.watch(folder.src+“html/",[“html”]);
gulp.watch(folder.src+"css/”,[“css”]);
gulp.watch(folder.src+“js/*”,[“js”]);
})

//task默认任务
gulp.task(“default”,[“html”,“css”,“js”,“image”,“server”,“watch”]);