项目gulp代码

gulp3.9.1版本

// 导入node_modules包下的gulp
var gulp = require('gulp');
var cssnano = require('gulp-cssnano');
var rename = require('gulp-rename');
var uglify = require('gulp-uglify');
var tinypng_nokey = require('gulp-tinypng-nokey');
var cache = require('gulp-cache');
var bs = require('browser-sync').create();
var sass = require('gulp-sass');
// gulp-util 这个插件中有一个方法log,可以打印出当前js错误的信息
var util = require('gulp-util');
var sourcemaps = require('gulp-sourcemaps');

var path = {
    'html':'./templates/**/',
    'css':'./src/css/',
    'js':'./src/js/',
    'image':'./src/images/',
    'css_dist':'./dist/css/',
    'js_dist':'./dist/js/',
    'image_dist':'./dist/images/'
};

gulp.task('html',function () {
    gulp.src(path.html+'*.html')
        .pipe(bs.stream());
});

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());
});

gulp.task('js',function () {
    gulp.src(path.js+'*.js')
        .pipe(sourcemaps.init())
        .pipe(uglify({'toplevel':true}).on('error',util.log))
        .pipe(rename({'suffix':'.min'}))
        .pipe(sourcemaps.write())
        .pipe(gulp.dest(path.js_dist))
        .pipe(bs.stream());
});

gulp.task('image',function () {
    gulp.src(path.image+'*.*')
        .pipe(cache(tinypng_nokey()))
        .pipe(gulp.dest(path.image_dist))
        .pipe(bs.stream());
});

gulp.task('watch',function () {
    gulp.watch(path.html+'*.html',['html']);
    gulp.watch(path.css+'*.scss',['css']);
    gulp.watch(path.js+'*.js',['js']);
    gulp.watch(path.image+'*.*',['image']);
});

gulp.task('bs',function () {
    bs.init({
        'server':{
            'baseDir':'./',
        },
    });
});

gulp.task('default',['bs','watch']);

gulp4.x版本

var gulp = require("gulp");
var cssnano = require("gulp-cssnano");
var rename = require("gulp-rename");
var uglify  = require("gulp-uglify");
var concat = require("gulp-concat");
var imagemin = require('gulp-imagemin');
var cache = require('gulp-cache');
var bs = require('browser-sync').create();
var sass = require('gulp-sass');
// gulp-util 这个插件中有一个方法log,打印出当前js错误的信息
var util = require('gulp-util');
// sourcemaps非常强大,因为引用的js文件是经过压缩后的,
// 压缩后的js文件就在一行内显示.如果出现错误,就是打印这
// 一行,还是无法看到发生错误的详细来源.而sourcemaps可以
// 让我们看到错误的详细来源.
var sourcemaps = require('gulp-sourcemaps');

// 定义路径,不要路径写死,方便后面使用
var path = {
    'html':'./templates/**/',
    'css':'./src/css/**/',
    'js':'./src/js/',
    'images': './src/images',
    'css_dist': './dist/css/',
    'js_dist': './dist/js/',
    'images_dist': './dist/images/'
};

// 定义一个处理html文件的任务
gulp.task("html",function (done) {
   gulp.src(path.html + '*.html')
       .pipe(bs.stream());
   done();
});

// 定义一个处理css文件的任务
gulp.task("css",function (done) {
   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());
    done();
});


// 定义一个处理js文件的任务
gulp.task("js",function (done) {
   gulp.src(path.js + '*.js')
       .pipe(sourcemaps.init())
       .pipe(uglify().on('error',util.log))
       .pipe(rename({"suffix":".min"}))
       .pipe(sourcemaps.write())
       .pipe(gulp.dest(path.js_dist))
       .pipe(bs.stream());
   done();

});

// 定义处理图片文件的任务
gulp.task("images",function (done) {
   gulp.src(path.images + "*.*")
       .pipe(cache(imagemin()))
       .pipe(gulp.dest(path.images_dist))
       .pipe(bs.stream());
    done();
});

// 定义监听文件修改的任务
gulp.task("watch",function () {
    gulp.watch(path.css+"*.scss",gulp.series("css"));
    gulp.watch(path.js+"*.js",gulp.series("js"));
    gulp.watch(path.images+"*.*",gulp.series("images"));
    gulp.watch(path.html+'*.html',gulp.series("html"));

});


// 初始化borwser-sync的任务
gulp.task("bs",function () {
    bs.init({
        "server":{
            "baseDir":"./"
        }
    })
});

// 创建一个默认的任务,来执行以上任务
//gulp.task("default",gulp.series(gulp.parallel("bs","watch")));
gulp.task('default',gulp.series("watch"));



// 方法二: 直接定义一个服务,并监听
// gulp.task("server",function (done) {
//    bs.init({
//        "server":{
//            "baseDir": "./"
//        }
//    });
//     gulp.watch(path.css+"*.css",gulp.series("css"));
//     gulp.watch(path.js+"*.js",gulp.series("js"));
//     gulp.watch(path.images+"*.*",gulp.series("images"));
//     done()
// });

package.json文件

{
  "name": "front",
  "version": "1.0.0",
  "description": "",
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "browser-sync": "^2.26.7",
    "gulp": "^3.9.1",
    "gulp-cache": "^1.1.3",
    "gulp-concat": "^2.6.1",
    "gulp-cssnano": "^2.1.3",
    "gulp-rename": "^1.4.0",
    "gulp-sass": "^4.0.2",
    "gulp-sourcemaps": "^2.6.5",
    "gulp-tinypng-nokey": "^1.1.0",
    "gulp-uglify": "^3.0.2",
    "gulp-util": "^3.0.8"
  }
}