gulp笔记

gulp

基于nodejs的自动任务运行器，前段工程化的构建工具

测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。

运行

gulp 任务名称

1.全局安装gulp

cnpm install gulp -g

测试

gulp -v

2、初始化----生成package.json文件，这一步可以省略

cnpm init

3、安装本地的gulp

cnpm install gulp --save  ---项目依赖

cnpm install gulp --save-dev  ----开发依赖

4、构建项目的基本开发目录

gulp-course

css

html

image

js

json

xml

index.html

5、创建一个文件gulpfile.js

----命令操作的文件，可以执行测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。

6、假设我们的项目上线的目录为dist

dist文件夹中的东西就是要上传到服务器里面的东西

7、复制操作

页面、图片、css文件等任何文件

页面

gulp.task("copy-index",function(){

//文件的路径

gulp.src("./index.html")

.pipe(gulp.dest("dist"));//表示如果没有dist文件夹，则创建一个文件夹，并且将index.html放进去

})

图片----推荐一劳永逸---第三种方法

gulp.task("copy-image",function(){

// gulp.src("./image/*.jpg")//只负责复制jpg图片

// gulp.src("./image/*.{jpg,png}")//负责复制jpg和png格式的图片

gulp.src("./image/**/*")//负责复制image文件夹下的所有的文件

.pipe(gulp.dest("dist/image"));

})

//同时负责json文件夹下的和xml文件夹下的到dist的data目录中去,加入在json文件家中c.json不希望复制过，我们使用！来搞定

gulp.task("copy-data",function(){

gulp.src(["xml/*.xml","json/*.json","!json/c.json"])

.pipe(gulp.dest("dist/data"));

})

8、如果希望一次性执行多个任务，使用的自带的任务--build

gulp.task("build",["copy-index","copy-image","copy-data"],function(){

console.log("执行完毕")

})

9、实时监测文件的更新  ---  任务watch

gulp.task("watch",function(){

gulp.watch("./index.html",["copy-index"]);

gulp.watch("./image/**/*",["copy-image"]);

gulp.watch(["xml/*.xml","json/*.json","!json/c.json"],["copy-data"]);

})

10、自动任务----执行时只需要输入gulp 即可  不需要输入 gulp defalt

gulp.task("default",["build","watch"])

11、gulp插件

less  ----- 添加到build和watch任务中

cnpm i gulp-less --save

gulp.task("less",function(){

gulp.src("./css/test.less")

.pipe(less())//编译less文件---less()

.pipe(gulp.dest("dist/css"));

})

sass  ----- 添加到build和watch任务中

cnpm i gulp-sass --save

gulp.task("sass",function(){

gulp.src("./css/main.scss")

.pipe(sass())//编译less文件---less()

.pipe(gulp.dest("dist/css"));

})

服务器配置

cnpm i gulp-connect --save

--- server  不能更改任务名

gulp.task("server",function(){

connect.server({

root:"dist", //启动项目目录

livereload:true  //热加载---实时更新数据---- 在更改完数据需要的地方设置一个connect.reload(),給每一个任务都加

})

})

合并文件

cnpm i gulp-concat --save

//合并js文件

gulp.task("script",function(){

gulp.src("./js/*.js")

.pipe(concat("ab.js"))  //css文件也可以合并，less文件也可以合并，scss文件也可以合并

.pipe(gulp.dest("dist/js"))

})

压缩js文件

cnpm i gulp-uglify  --save

gulp.task("script",function(){

gulp.src("./js/*.js")

.pipe(concat("ab.js"))

.pipe(uglify()) // 压缩js代码

.pipe(gulp.dest("dist/js"))

})

压缩css文件

cnpm i gulp-minify-css --save

//less编译

gulp.task("less",function(){

gulp.src("./css/test.less")

.pipe(less())//编译less文件---less()

.pipe(minifyCss()) //压缩之后再放进文件夹

.pipe(gulp.dest("dist/css"))

.pipe(connect.reload())

})

//sass编译

gulp.task("sass",function(){

gulp.src("./css/main.scss")

.pipe(sass())//编译less文件---less()

.pipe(minifyCss()) //压缩之后再放进文件夹

.pipe(gulp.dest("dist/css"))

.pipe(connect.reload())

})

重起名字

cnpm i gulp-rename --save

//合并js文件

gulp.task("script",function(){

gulp.src("./js/*.js")

.pipe(concat("ab.js"))  //重起名字

.pipe(gulp.dest("dist/js"))

.pipe(rename("ab.min.js"))//重起名字

.pipe(uglify()) // 压缩js代码

.pipe(gulp.dest("dist/js"))

})

//less编译

gulp.task("less",function(){

gulp.src("./css/test.less")

.pipe(less())//编译less文件---less()

.pipe(rename("test.css"))//重起名字

.pipe(gulp.dest("dist/css"))

.pipe(rename("test.min.css"))//重起名字

.pipe(minifyCss())

.pipe(gulp.dest("dist/css"))

.pipe(connect.reload())

})

//sass编译

gulp.task("sass",function(){

gulp.src("./css/main.scss")

.pipe(sass())//编译less文件---less()

.pipe(rename("main.css"))//重起名字

.pipe(gulp.dest("dist/css"))

.pipe(rename("main.min.css"))//重起名字

.pipe(minifyCss())

.pipe(gulp.dest("dist/css"))

.pipe(connect.reload())

})

压缩图片

cnpm install gulp-imagemin --save

gulp.task("copy-image",function(){

// gulp.src("./image/*.jpg")//只负责复制jpg图片

// gulp.src("./image/*.{jpg,png}")//负责复制jpg和png格式的图片

gulp.src("./image/**/*")//负责复制image文件夹下的所有的文件

.pipe(imagemin())//压缩图片

.pipe(gulp.dest("dist/image"))

.pipe(connect.reload())

})

拓展

http://npmjs.org/

搜索gulp