Gulp

一、安装node
二、安装git
三、安装全局gulp
npm install -g gulp
四、gulp 初始化
npm init
初始化完成以后就会出现一个package.json文件、这个就是咱们的项目描述文件

May be possible solution is:

rm -rf node_modules/
npm install

五、安装本地gulp
npm install gulp --save-dev
安装步骤完成
七、在当前的目录下建立gulpfile.js的文件
八、定义任务
/*

• 定义一个任务
• /
  gulp.task('hello', function () {
  console.log("hello gulp");
  });
  gulp.task('world', function () {
  console.log("world")
  });
  /
• 定义一个组合任务
• /
  gulp.task('default', ['hello', 'world'], function () {
  console.log("回调");
  });
  Gulp不少对文件的拷贝删除建立合并压缩等等
  九、拷贝多个文件(以图片为例)
  /
• 拷贝
• dist 发行版本
• src 是一个相对路径、相对于本身这个配置文件的路径
• dest 指定目标路径
• /
  gulp.task("copyHtml", function () {
  return gulp.src("./app/index.html")
  .pipe(gulp.dest('dist'));
  });
  /
• 拷贝多个文件(图片)
• /
  gulp.task("copyImage", function () {
  return gulp.src("./app/images/.jpg")
  .pipe(gulp.dest('dist/images'));
  });
  // 多文件类型拷贝(如今只能拷贝一级)
  gulp.task("copyImage2", function () {
  return gulp.src("./app/images/.{jpg,png}")
  .pipe(gulp.dest('dist/images'));
  });
  // 多文件类型拷贝(多级拷贝)
  // 能匹配任意字符(除了路劲分割符/ )
  gulp.task("copyImage3", function () {
  return gulp.src("./app/images/**/*.{jpg,png}")
  .pipe(gulp.dest('dist/images'));
  });
  十、合并子任务

/*

• 拷贝多个路劲(图片、html、css、js等)
• */
  gulp.task("copyImage4", function () {
  return gulp.src("./app/images/**/*.{jpg,png}")
  .pipe(gulp.dest('dist/images'));
  });
  gulp.task("copyImage5", function () {
  return gulp.src(['./app/js/base.js','./app/js/index.js'])
  .pipe(gulp.dest('dist/js'));
  });
  // gulp 是异步的 pipe是异步的
  gulp.task("copyImage6", function () {
  return gulp.src(["./app/js/*.js","!./app/js/index.js"])
  .pipe(gulp.dest('dist/js'));
  });
  gulp.task("copyHtml",function(){
  return gulp.src('./app/index.html')
  .pipe(gulp.dest('dist'));
  });

gulp.task("default",['copyHtml','copyImage6','copyImage4'],function(){
console.log("拷贝结束");
});
拷贝、复制
十一、监控文件变化
/*

• 监控文件的变化
• 监控copyHtml的变化
• */
  gulp.task('watch',function(){
  gulp.watch('./app/index.html',['copyHtml'],function(){
  console.log("index.html内容改变");
  })
  });
  watch task src dest 都是gulp本身的方法、本身的方法是很弱小的
  实现跟强大的功能须要借助gulp插件的支持
  十二、scss 在webstorm中。。须要添加node.js的支持、在watcher中 Program的nodejs安装路径的node.exe文件路径
  1三、编译sass
  gulp.task("sass", function () {
  return gulp.src('app/styles/main.scss')
  .pipe(sass())
  .pipe(gulp.dest('dist/styles'));
  })
  1四、实时预览 建立服务器。是否能够当作本地服务器使用？

gulp.task("copyHtml", function () {
return gulp.src('./app/index.html')
.pipe(gulp.dest('dist'))
.pipe(connect.reload());
});
gulp.task("copyCss", function () {
return gulp.src('./app/styles/*.scss')
.pipe(sass())
.pipe(gulp.dest('dist/styles'))
.pipe(connect.reload());
});
gulp.task("default", ['copyHtml', 'copyImage6', 'copyImage4'], function () {
console.log("拷贝结束");
})

/*

• 编译sass
• */

gulp.task("sass", function () {
return gulp.src('app/styles/main.scss')
.pipe(sass())
.pipe(gulp.dest('dist/styles'));
});
;
/*

• 监控文件的变化
• 监控copyHtml的变化
• /
  gulp.task('watch', function () {
  gulp.watch(['./app/index.html','./app/styles/*.scss'], ['copyHtml','sass'], function () {
  console.log("index.html内容改变");
  })
  });
  /
• 建立本地服务 gulp-connect
• 实时预览
• */
  gulp.task('server', function () {
  connect.server({
  root:'dist',
  port: 8080,
  livereload:true//动态加载 实时刷新
  });
  });
  gulp.task("default",["server","watch"],function(){
  // 监听
  console.log("实时监控预览、并刷新服务器");
  })

1五、合并文件

/*

• 合并文件
• /
  gulp.task('concatScript',function(){
  return gulp.src(["./app/js/*.js", "./app/js/index.js"])
  .pipe(concat('join-concat.js'))
  .pipe(gulp.dest('dist/js'));
  });
  1六、压缩文件 重命名
  /
• 合并文件
• /
  gulp.task('concatScript', function () {
  return gulp.src(["./app/js/*.js", "./app/js/index.js"])
  .pipe(concat('join-concat.js'))
  .pipe(rename('join-min-concat.js'))
  .pipe(gulp.dest('dist/js'));
  });
  /
• 压缩文件
• */

gulp.task('uglify', function () {
return gulp.src(["./app/js/*.js", "./app/js/index.js"])
.pipe(concat('join-concat.js'))
.pipe(uglify())
.pipe(rename('join-min.js'))
.pipe(gulp.dest('dist/js'))
});
/*
1七、压缩css

gulp.task("sass", function () { return gulp.src('app/styles/main.scss') .pipe(sass()) .pipe(minifyCss()) .pipe(rename('main-min.css')) .pipe(gulp.dest('dist/styles')); }); 1八、压缩图片 gulp.task("copyImage3", function () { return gulp.src("./app/images/**/*.{jpg,png}") .pipe(imagemin()) .pipe(gulp.dest('dist/images')); }); 1九、自动修改引用