sudo npm install -g gulp
mkdir ninghao-gulp
cd ninghao-gulp
npm init #全部回车
ls #可以看package.json
npm i gulp -D#局部安装gulp
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 #优化图像尺寸
