//引入gulp组件
var gulp=require('gulp'); //创建任务
gulp.task('hello',function(){
console.log('hello');
});
//创建另一个任务
gulp.task('world',function(){
console.log('world');
});
//默认执行两个任务
//一个gulpfile.js中只能有一个default
//三种写法,3个参数
/**
* [description] default默认 的写法
* 写法一:gulp.task('default',function(){});
* 写法二:gulp.task('default',['task1','task2','....']);
* 写法三:gulp.task('difault',['task1','task2','...'],function(){});
*
*/
/*gulp.task('default',['hello','world'],function(){
console.log('finish');
});*/
//gulp的具体用法 //拷贝文件
gulp.task('copy-files',function(){
//src:找到源文件 相对于gulpfile.js的路径
//pipe ‘拷贝’ 管道 参数 拷贝完需要做的事
//dest 目标 参数:路径
gulp.src('src/index.html').pipe(gulp.dest('dist'));
});
//只拷贝类型为jpg的文件
gulp.task('copy-images',function(){
gulp.src('src/images/*.jpg').pipe(gulp.dest('dist/img'));
});
//拷贝所有文件
//*表示第1层 **表示第二层 /**/*所有文件
gulp.task('copy-allfiles',function(){
gulp.src('src/images/*').pipe(gulp.dest('dist/img'));
});
//将多个文件的内容拷贝到一个文件夹下
gulp.task('copy-data',function(){
//src路径可以是一个数组['src1','src2'] 不需要的文件在路径前加一个!
gulp.src('src/data/*').pipe(gulp.dest('dist/data'));
});
//监听
/*gulp.task('watch',function(){
//watch()监听 参数1:需要监听的文件 参数2:当监听到变化后完成的方法
gulp.watch('src/index.html',['copy-files']);
});*/
// 停止监听(其他命令) Ctrl+C //引入gulp的插件gulp-connect 这个插件可以启动本地服务
var connect=require('gulp-connect');
gulp.task('server',function(){
//启动本地服务
connect.server({
//设置服务的根路径
root:'dist',
//开启实时更新
livereload:true,
//设置端口 默认8080
port:80
});
});
gulp.task('watch',function(){
gulp.watch('src/index.html',function(){
gulp.src('src/index.html').pipe(gulp.dest('dist')).pipe(connect.reload());
});
});
gulp.task('default',['server','watch']); var concat=require('gulp-concat');
//创建任务合并js文件
gulp.task('concat-js',function(){
gulp.src(['src/js/test1.js','src/js/test2.js']).pipe(concat('vendor.js')).pipe(gulp.dest('dist/js'));
});
//压缩js文件
var uglify=require('gulp-uglify');
gulp.task('uglify-js',function(){
gulp.src(['src/js/test1.js','src/js/test2.js']).pipe(concat('vendor.js')).pipe(uglify()).pipe(gulp.dest('dist/js'));
});
//重命名插件
var rename=require('gulp-rename');
gulp.task('rename-js',function(){
gulp.src(['src/js/test1.js','src/js/test2.js']).pipe(concat('vendor.js')).pipe(gulp.dest('dist/js')).pipe(uglify()).pipe(rename('vendor.min.js')).pipe(gulp.dest('dist/js/'));
});
//合并css
gulp.task('concat-css',function(){
gulp.src(['src/css/style1.css','src/css/style2.css']).pipe(concat('style.css')).pipe(gulp.dest('dist/css'));
});
var minify=require('gulp-minify-css');
gulp.task('minify-css',function(){
gulp.src(['src/css/style1.css','src/css/style2.css']).pipe(concat('style.css')).pipe(rename('style.min.css')).pipe(minify()).pipe(gulp.dest('dist/css'));
});

来到本地路径,创建工程配置文件
npm init

本地安装gulp
npm install gulp --save-dev
让package.json依赖于gulp

安装package.json中依赖了的组件
npm install

安装服务的插件
npm install gulp-connect --save-dev

合并文件的插件
npm install gulp-concat --save-dev

压缩js文件的插件
npm install gulp-uglify --save-dev

给文件重命名的插件
npm install gulp-rename --save-dev

压缩css文件的插件
npm install gulp-minify-css --save-dev

代码目录树

最新文章

  1. Spark 入门
  2. GTP (GPRS隧道协议(GPRSTunnellingProtocol))
  3. C语言内存对齐详解(2)
  4. oracle数据库表空间文件收缩实例
  5. JAVA final关键字,常量的定义
  6. php pod
  7. Android聊天界面刷新消息
  8. Kafka小记
  9. angular路由最基本的实例---简单易懂
  10. Kafka 客户端实现逻辑分析
  11. C3制作导航栏分割线及立体风格
  12. maven pom.xml 中各个标签元素的作用
  13. robotframework学习笔记(七)------筛选执行用例
  14. XGoServer 一个基础性、模块完整且安全可靠的服务端框架
  15. spring,springMVC中常用注解
  16. Blender界面及模式统计
  17. 1.maven中pom.xml文件中<exclusions>标签认不到问题
  18. [C# 开发技巧]如何使不符合要求的元素等于离它最近的一个元素
  19. Linux rm的一次误用
  20. git超详细教程留着当手册

热门文章

  1. 【JZOJ4882】【NOIP2016提高A组集训第12场11.10】多段线性函数
  2. python 文件读写编码
  3. python 错误类型
  4. Nuxt.js打造旅游网站第1篇_项目环境搭建
  5. MyBatis动态SQL(二)
  6. 关于mybatis中llike模糊查询中#和$的使用
  7. Gym - 101480A_ASCII Addition
  8. Jmeter If控制器
  9. 利用mock生成随机的东西
  10. mysql数据库之linux版本