原声js写多个单页面项目，gulp打包

 

项目目录，每一个文件夹对应一个页面

单个文件夹结构

dist是打包后的文件夹

对应的都是编译压缩好的文件

gulpfile.js文件

var gulp = require('gulp');
//编译sass插件
var sass = require('gulp-sass');
//实时刷新html页面
var connect = require('gulp-connect');

//压缩css文件
var cleanCSS = require('gulp-clean-css');
//压缩html文件
var htmlmin = require('gulp-htmlmin');

//压缩js文件插件
var uglify = require('gulp-uglify');
//es6转es5
var babel = require('gulp-babel');
//编译sass的任务
gulp.task('sass', function () {
	//需要编译的文件路径
  gulp.src('*/scss/index.scss')
    .pipe(sass()) //编译来时
    .pipe(gulp.dest('dist/'));//编译后输出路径
});
//刷新页面
gulp.task('html',function(){
   gulp.src('*/index.html')
   .pipe(connect.reload())
})

//定义livereload任务,实时刷新页面不可缺少
gulp.task('connect', function () {
    connect.server({
        livereload: true
     });
});
//gulp-htmlmin  压缩html
gulp.task('htmlmin', function() {
  return gulp.src('*/index.html')
    .pipe(htmlmin({collapseWhitespace: true}))
    .pipe(gulp.dest('dist/'));
});
// 压缩 css 文件
// 在命令行使用 gulp csscompress 启动此任务
gulp.task('csscompress', function() {
    // 1. 找到文件
  return  gulp.src('dist/*/scss/index.css')
    // 2. 压缩文件
        .pipe(cleanCSS())
        // 3. 另存压缩后的文件
        .pipe(gulp.dest('dist/'));
});
// 压缩 js 文件
// 在命令行使用 gulp jscompress 启动此任务
gulp.task('jscompress', function() {
    // 1. 找到文件
   return gulp.src('*/js/index.js')
   		.pipe(babel({
                presets: ['es2015'] // es5检查机制
           }))
        .pipe(uglify()) // 2. 压缩文件
        .pipe(gulp.dest('dist/')); // 3. 另存压缩后的文件
});
//定义看守任务
gulp.task('watch', function () {
	//只要'*/scss/index.scss'文件发生变化,就执行sass和html任务
	gulp.watch('*/scss/index.scss',['sass','html'])
    gulp.watch('*/index.html', ['html']);  //监听html目录下所有文件
    
});
gulp.task('dev',['watch','html','connect']);
gulp.task('build',['htmlmin','csscompress','jscompress']);

package.json文件

{
  "name": "pc-1.0",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "gulp": "^3.9.1"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-preset-es2015": "^6.24.1",
    "gulp-babel": "^7.0.1",
    "gulp-clean-css": "^3.9.4",
    "gulp-connect": "^5.5.0",
    "gulp-htmlmin": "^4.0.0",
    "gulp-sass": "^4.0.1",
    "gulp-uglify": "^3.0.0"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev":"gulp dev",
    "build":"gulp build"
  },
  "author": "",
  "license": "ISC"
}

npm run dev执行的是gulp dev 任务、（编译sass实时刷新页面）

npm run build 执行的是gulp build任务 （压缩）