1、安装node

2、安装git

3、安装全局gulp

npm install -g gulp

4、gulp 初始化

npm init

初始化完成之后就会出现一个package.json文件、这个就是我们的项目描述文件

May be possible solution is:

rm -rf node_modules/

npm install

5、安装本地gulp

npm install gulp --save-dev

安装步骤完成

7、在当前的目录下创建gulpfile.js的文件

8、定义任务

/*

• 定义一个任务
• /
  gulp.task('hello', function () {
  console.log("hello gulp");
  });
  gulp.task('world', function () {
  console.log("world")
  });
  /
• 定义一个组合任务
• /
  gulp.task('default', ['hello', 'world'], function () {
  console.log("回调");
  });
  Gulp很多对文件的拷贝删除创建合并压缩等等
  9、拷贝多个文件(以图片为例)
  /
• 拷贝
• 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'));
  });
  10、合并子任务

/*

• 拷贝多个路劲(图片、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("拷贝结束");

});

拷贝、复制

11、监控文件变化

/*

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

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("实时监控预览、并刷新服务器");
  })

15、合并文件

/*

• 合并文件
• /
  gulp.task('concatScript',function(){
  return gulp.src(["./app/js/*.js", "./app/js/index.js"])
  .pipe(concat('join-concat.js'))
  .pipe(gulp.dest('dist/js'));
  });
  16、压缩文件 重命名
  /
• 合并文件
• /
  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'))

});

/*

17、压缩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'));

});

18、压缩图片

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

return gulp.src("./app/images/**/*.{jpg,png}")

.pipe(imagemin())

.pipe(gulp.dest('dist/images'));

});

19、自动修改引用