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九、自動修改引用