gulp入门

实现自动刷新功能
在目录下创建js文件gulpfile.js

var gulp = require('gulp');

// 公用util
var browserSync = require('browser-sync'); // 自动刷新
var plumber = require('gulp-plumber'); // gulp 错误处理
var rename = require('gulp-rename'); // 文件重命名

// CSS相关
var postcss = require('gulp-postcss');
var precss = require('precss');
var autoprefixer = require('autoprefixer');
var extend = require('postcss-simple-extend');
var mixins = require('postcss-sassy-mixins');
var comment = require('postcss-inline-comment');
var scss = require('postcss-scss');
var stripInlineComments = require('postcss-strip-inline-comments');

// build 使用
var runSequence = require('run-sequence'); // 另一个任务同步处理工具
var del = require('del'); // 删除文件专用
var zip = require('gulp-zip');

function buildCss() {
    var postCssPlugins = [
        precss,
        autoprefixer({
            browsers: ['> 1%', 'IE > 8', 'Android >= 1.6', 'iOS >= 1.0']
        }),
        stripInlineComments
    ];

    gulp.src('./scss/style.scss')
        .pipe(plumber())
        .pipe(postcss(postCssPlugins, {syntax: scss}))
        .pipe(rename(function (path) {
            path.extname = '.css';
        }))
        .pipe(gulp.dest('./css'));
}

gulp.task('browserSync', function () {
    browserSync.init({
        port: 2333,
        server: {
            baseDir: './',
            index: 'myOrder.html'
        }
    });

    browserSync.watch('./css/*.css').on('change', browserSync.reload);
    browserSync.watch('./js/*.js').on('change', browserSync.reload);
    browserSync.watch('./*.html').on('change', browserSync.reload);
});

gulp.task('scss', function () {
    buildCss();
    gulp.watch('scss/*.scss', function () {
        buildCss();
    });
});

gulp.task('default', ['browserSync', 'scss']);

// ---------- 下面是编译所有的 gulp处理工具 --------- 下面的先不看还没有完成

// 清空build目录
gulp.task('clean', function (cb) {
    return del([
        './dist/**/*'
    ], cb);
});

// 只编译css 不监听
gulp.task('css:build', function () {
    buildCss();
});

// 移动img html js css
gulp.task('file:copy', function () {
    // 复制 html
    gulp.src('./*.html')
        .pipe(gulp.dest('./dist'));

    // 复制 js
    gulp.src(['./js/*.js', './js/**/*'])
        .pipe(gulp.dest('./dist/js'));

    // 复制 img
    gulp.src(['./img/*', './img/**/*'])
        .pipe(gulp.dest('./dist/img'));

    // 复制 css
    gulp.src('./css/*.css')
        .pipe(gulp.dest('./dist/css'));
});

gulp.task('zip', function () {
    gulp.src(['./dist/*', './dist/**/*'])
        .pipe(zip('sae.zip'))
        .pipe(gulp.dest('./dist'));
});

gulp.task('build', function () {
    // 复制 html
    runSequence('clean', ['css:build'], 'file:copy', function () {
        console.log('build boom!');
    });
});

创建json文件package.json文件

{
  "name": "cofco",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "gulp",
    "build": "gulp build",
    "static": "http-server './dist' -p 5678 -o",
    "zip": "gulp zip"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^6.5.3",
    "browser-sync": "^2.18.2",
    "del": "^2.2.2",
    "gulp": "^3.9.1",
    "gulp-plumber": "^1.1.0",
    "gulp-postcss": "^6.2.0",
    "gulp-rename": "^1.2.2",
    "gulp-zip": "^3.2.0",
    "http-server": "^0.9.0",
    "postcss-inline-comment": "^3.0.0",
    "postcss-sassy-mixins": "^2.0.0",
    "postcss-scss": "^0.4.0",
    "postcss-simple-extend": "^1.0.0",
    "postcss-strip-inline-comments": "^0.1.5",
    "precss": "^1.4.0",
    "run-sequence": "^1.2.2"
  }
}

启动cmd ,先进入目录文件夹，在下载gulp要用到的各种包输入命令

npm install 

下载好各种包之后就可以运行了

npm run dev