Gulp

• 安装Gulp

sudo npm install -g gulp
mkdir ninghao-gulp
cd ninghao-gulp
npm init #全部回车
ls #可以看package.json
npm i gulp -D#局部安装gulp

• 编写gulpfile.js

vim gulpfile.js

var gulp = require('gulp');#引入gulp

gulp.task('hello',function(){
  cosole.log('您好')
})
#gulp任务,第一个参数任务名称,第二个参数执行的匿名函数

gulp hello #控制台可以见到您好

gulp.task('default',['hello']);
#默认执行任务,第二个参数要执行的任务名称,一个数组
gulp #执行数组中所有任务

gulp.task('copy-index',function(){
  return gulp.src('index.html').pipe(gulp.dest('dist'));
})
#复制inde.html到dist目录
gulp copy-index#执行任务
```
+ Browser-Sync

```
npm i  browser-sync -D #安装browser-sync

var browserSync = require('browser-sync').create();

gulp.task('browser-sync',function(){
 browserSync.init({
  server:{
           baseDir: 'dist'
         },
   files:['dist/index.html','dist/css/*.css']
 })
})

```

+ gulp-connect #服务器

```
var connect = require('gulp-connect');
gulp.task('server',function(){
 connect.server({
   root: 'dist',
   livereload: true
 })
})
```


+ gulp-concat #合并多个文件

```
gulp.task('scripts',function(){
 gulp.src(['javascript/jquery.js','javascript/a.js'])
      .pipe(concat('vendor.js'))
      .pipe(gulp.dest('dist/js'));
})
```


+ gulp-uglify #压缩js

```
gulp.task('scripts',function(){
 gulp.src(['javascript/jquery.js','javascript/a.js'])
      .pipe(concat('vendor.js'))
      .pipe(uglify())
      .pipe(gulp.dest('dist/js'));
})
```


+ gulp-rename #重命名文件

+ gulp-minify-css #压缩css

+ gulp-imagemin #优化图像尺寸