gulp用法

1.初始化一个项目:npm init

2.安装gulp环境:npm install gulp --save-dev

packages.json内容如下：

{
  "name": "front",
  "version": "1.0.0",
  "description": "xfz",
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "author": "力王",
  "license": "ISC",
  "devDependencies": {
    "browser-sync": "^2.26.3",
    "gulp-autoprefixer": "^6.0.0",
    "gulp-cache": "^1.1.1",
    "gulp-concat": "^2.6.1",
    "gulp-concat-folders": "^1.3.1",
    "gulp-connect": "^5.7.0",
    "gulp-cssnano": "^2.1.3",
    "gulp-imagemin": "^5.0.3",
    "gulp-rename": "^1.4.0",
    "gulp-sass": "^4.0.2",
    "gulp-uglify": "^3.0.1"
  }
}
#然后npm install就会自动读取内容包下载

创建gulpfile.js(必须叫这个名字)

var gulp = require('gulp');
var cssnano = require('gulp-cssnano');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var concat = require('gulp-concat');
var cache = require('gulp-cache');
var imagemin = require('gulp-imagemin');
var bs = require('browser-sync').create();
var sass = require('gulp-sass');
var path = {
    'html': './template/**/',
    'css':'./src/css/',
    'js':'./src/js/',
    'image':'./src/image/',
    'css_dist': './dist/css/',
    'js_dist': './dist/js/',
    'image_dist': './dist/image/',
};
//定义压缩图片的任务
gulp.task('images',function () {
    gulp.src(path.image + '*.*')
        .pipe(rename({
            'suffix':'.min'
        }))
        .pipe(cache(imagemin()))
        .pipe(gulp.dest(path.image_dist))
        .pipe(bs.stream())
});
//定义加载html的任务
gulp.task('html', function () {
   gulp.src(path.html + '*.html')
       .pipe(bs.stream())
});
//定义压缩css文件的任务
gulp.task('css', function () {
   gulp.src(path.css + '*.scss')
       .pipe(sass().on('error', sass.logError))
       .pipe(cssnano())
       .pipe(rename({
           'suffix':'.min'
       }))
       .pipe(gulp.dest(path.css_dist))
       .pipe(bs.stream())
});
//定义压缩js文件的任务
gulp.task('js',function () {
    gulp.src(path.js + '*.js')
        .pipe(uglify())
        .pipe(rename({
            'suffix':'.min'
        }))
        .pipe(gulp.dest(path.js_dist))
        .pipe(bs.stream())
});


//定义监听css文件修改的任务
gulp.task('watch',function () {
    gulp.watch(path.css + '*.scss', ['css']);
    gulp.watch(path.js + '*.js', ['js']);
    gulp.watch(path.image + '*.*', ['images']);
    gulp.watch(path.html + '*.html', ['html']);
});
//定义浏览器初始化的任务
gulp.task('bs', function () {
    bs.init({
        'server': {
            baseDir:'./'
        }
    })
});
//定义浏览器刷新任务
gulp.task('server',['bs', 'watch']);