gulp配置 - PC

初始化目录结构如下（图片看不清可以拖到桌面或者直接CTRL+鼠标滚轮进行观看）

开发环境示例：

上线环境示例：

gulpfile.js（详解版）

（2018-3-28）添加了scss处理（去除了less处理）

（2018-3-29）添加了实时性处理（在src目录，sass目录下*.css和*.scss放在一起，防止跨域无法请求到）

（2018-3-29）已知错误：生成文件夹dist后index.html无法重命名css和js

(2018-4-12) 修复完毕（最简版）- 点击Github拉取 - 已失效

(2018-7-2)  完成src 和 dist 分类 - 正常使用（项目目录也添加了）Github拉取 -已失效

(2018-7-19) 修改了一些小细节问题，升级了package.json版本，点击Github拉取　

(2018-8-10) 上传了丢失的文件夹build.

(2018-8-15) win10 ghost系统也许无法正常使用 - 缺少一些图片处理（建议使用win7或win10正版）

(2018-10-16) npm install 统一改为 yarn install ,否则会报错丢包等

README.md（必看说明文档）

 # gulp-demos
 #########GULP使用##########
 <!-- 依照package.json安装里面的包依赖 -->
 1. npm install
 <!-- 初始化src目录 -->
 2. gulp init
 <!-- 初始化src/index.html 和 src/sass/index.scss 文件 -->
 3. gulp-file
 <!-- 开发 -->
 4. gulp
 <!-- 打包上线 -->
 5. gulp upline

 ##########开发和生成都是gulp#################
 1. 开发目录(src)
 2. 打包目录(dist)

 ###########关于reset-h5##########################
 1. 这个是我自制的初始化index.html页面！

 ############关于build#####################
 1. 本来这里是放配置文件，以及打包和生成都要配置的(一切为了快速使用！)

gulpfile.js

 var gulp = require('gulp'),
     $ = require('gulp-load-plugins')(),
     sass = require('gulp-sass'),
     open = require('open');

 var init = require('./build/gulpfile.init.js');
 init();

 // 文件路径
 var app = {
     srcPath: 'src/', //源代码路径
     prdPath: 'dist/' //生产环境路径
 };

 // #######################开发时#########################################
 gulp.task('html', function () {
     gulp.src(app.srcPath + '/**/*.html')
         .pipe($.connect.reload());
 });

 gulp.task('scss', function () {
     return gulp.src(app.srcPath + '/sass/*.scss')
         .pipe(sass.sync().on('error', sass.logError))
         .pipe(gulp.dest(app.srcPath + 'css'))
         .pipe($.connect.reload());
 });

 gulp.task('css', function () {
     gulp.src(app.srcPath + 'css/**/*.css')
         .pipe($.autoprefixer({
             // 可根据项目需要自行配置需要兼容的版本
             browsers: ['last 2 versions']
         }))
         .pipe(gulp.dest(app.srcPath + 'css'))
         .pipe($.connect.reload())
 });

 gulp.task('js', function () {
     gulp.src(app.srcPath + 'js/**/*.js')
         .pipe($.concat('index.js'))
         .pipe($.uglify())
         .pipe($.connect.reload());
 });

 gulp.task('images', function () {
     gulp.src(app.srcPath + 'images/**/*')
         .pipe($.imagemin({
             optimizationLevel: ,
             progressive: true,
             interlaced: true
         }))
         .pipe($.connect.reload());
 });

 gulp.task('build', ['images', 'js', 'scss', 'css', 'html']);

 // ######################################项目上线#################################################
 gulp.task('htmlmin', function () {
     const options = {
         removeComments: true, //清除HTML注释
         collapseWhitespace: true, //压缩HTML
         collapseBooleanAttributes: true, //省略布尔属性的值 <input checked="true"/> ==> <input />
         removeEmptyAttributes: true, //删除所有空格作属性值 <input id="" /> ==> <input />
         removeScriptTypeAttributes: true, //删除<script>的type="text/javascript"
         removeStyleLinkTypeAttributes: true, //删除<style>和<link>的type="text/css"
         minifyJS: true, //压缩页面JS
         minifyCSS: true //压缩页面CSS
     };
     gulp.src(app.srcPath + '/**/*.html')
         .pipe($.changed(app.prdPath))
         .pipe($.htmlmin(options))

         // 生产目录
         .pipe(gulp.dest(app.prdPath))
         .pipe($.notify({
             message: 'HTML has been packaged!'
         }));
 });

 gulp.task('cssmin', function () {
     gulp.src(app.srcPath + 'css/**/*.css')
         .pipe($.changed(app.srcPath))
         .pipe($.autoprefixer({
             // 可根据项目需要自行配置需要兼容的版本
             browsers: ['last 2 versions']
         }))
         .pipe($.cssmin({
             //类型：Boolean 默认：true [是否开启高级优化（合并选择器等）]
             advanced: false,
             //保留ie7及以下兼容写法 类型：String 默认：''or'*' [启用兼容模式； 'ie7'：IE7兼容模式，'ie8'：IE8兼容模式，'*'：IE9+兼容模式]
             compatibility: 'ie8',
             //类型：Boolean 默认：false [是否保留换行]
             keepBreaks: false
         }))
         .pipe($.cssnano())
         .pipe(gulp.dest(app.prdPath + 'css'))
         .pipe($.notify({
             message: 'CSS has been packaged!'
         }));
 });

 gulp.task('jsmin', function () {
     gulp.src(app.srcPath + 'js/**/*.js')
         .pipe($.changed(app.prdPath))
         .pipe($.concat('index.js'))
         .pipe($.uglify())
         .pipe(gulp.dest(app.prdPath + 'js'))
 });

 gulp.task('imagesmin', function () {
     gulp.src(app.srcPath + 'images/**/*')
         .pipe($.imagemin({
             optimizationLevel: ,
             progressive: true,
             interlaced: true
         }))
         .pipe(gulp.dest(app.prdPath+'images'));
 });

 gulp.task('upline', ['htmlmin', 'jsmin', 'cssmin', 'imagesmin']);

 // ######################################项目结束#################################################

 gulp.task('serve', ['build'], function () {
     $.connect.server({
         root: [app.srcPath],
         livereload: true,
         port:
     });

     open('http://localhost:3000');

     gulp.watch(app.srcPath + '**/*.html', ['html']);
     gulp.watch(app.srcPath + 'data/**/*.json', ['json']);
     gulp.watch(app.srcPath + 'sass/**/*.scss', ['scss']);
     gulp.watch(app.srcPath + 'css/**/*.css', ['css']);
     gulp.watch(app.srcPath + 'js/**/*.js', ['js']);
     gulp.watch(app.srcPath + 'images/**/*', ['images']);
 });

 gulp.task('default', ['serve']);

package.json

 {
     "name": "gulp-demos",
     "version": "1.0.0",
     "description": "",
     "main": "index.js",
     "dependencies": {},
     "devDependencies": {
         "browser-sync": "^2.18.8",
         "del": "^3.0.0",
         "gulp": "^3.9.1",
         "gulp-changed": "^3.2.0",
         "gulp-clean": "^0.4.0",
         "gulp-concat": "^2.6.1",
         "gulp-connect": "^5.5.0",
         "gulp-cssmin": "^0.2.0",
         "gulp-imagemin": "^4.1.0",
         "gulp-less": "^4.0.0",
         "gulp-load-plugins": "^1.5.0",
         "gulp-sass": "^3.2.1",
         "gulp-uglify": "^3.0.0",
         "gulp-rename": "^1.2.2",
         "gulp-cssnano": "^2.1.2",
         "htmlmin": "^0.0.7",
         "gulp-autoprefixer": "^5.0.0",
         "gulp-notify": "^3.2.0",
         "gulp-htmlmin": "^4.0.0",
         "gulp-rev": "^8.1.1",
         "open": "0.0.5"
     },
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1"
     },
     "keywords": [],
     "author": "",
     "license": "ISC"
 }

gulp-file.bat

@echo off >>src/sass/index.scss
@echo off >>src/index.html
type reset-h5.html>>src/index.html

 reset-h5.html

 <!DOCTYPE html>
 <html lang="en">

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
     <link rel="stylesheet" href="./css/index.css">
     <title>Document</title>
 </head>

 <body>
     6666
 </body>

 </html>

build/gulpfile.config.js

 var SRC_DIR = './src/'; // 源文件目录
 var DIST_DIR = './dist/'; // 文件处理后存放的目录
 var DIST_FILES = DIST_DIR + '**'; // 目标路径下的所有文件  

 var Config = {
     src: SRC_DIR,
     dist: DIST_DIR,
     dist_files: DIST_FILES,
     html: {
         dir: SRC_DIR,
         src: SRC_DIR + '*.html',
         dist: DIST_DIR
     },
     json: {
         dir: SRC_DIR,
         src: SRC_DIR + 'data/**/*.json',
         dist: DIST_DIR + 'json'
     },
     assets: {
         dir: SRC_DIR + 'assets',
         src: SRC_DIR + 'assets/**/*', // assets目录：./src/assets
         dist: DIST_DIR + 'assets' // assets文件build后存放的目录：./dist/assets
     },
     css: {
         dir: SRC_DIR + 'css',
         src: SRC_DIR + 'css/**/*.css', // CSS目录：./src/css/
         dist: DIST_DIR + 'css' // CSS文件build后存放的目录：./dist/css
     },
     sass: {
         dir: SRC_DIR + 'sass',
         src: SRC_DIR + 'sass/**/*.scss', // SASS目录：./src/sass/
         dist: DIST_DIR + 'css' // SASS文件生成CSS后存放的目录：./dist/css
     },
     js: {
         dir: SRC_DIR + 'js',
         src: SRC_DIR + 'js/**/*.js', // JS目录：./src/js/
         dist: DIST_DIR + 'js', // JS文件build后存放的目录：./dist/js
         build_name: 'build.js' // 合并后的js的文件名
     },
     img: {
         dir: SRC_DIR + 'images',
         src: SRC_DIR + 'images/**/*', // images目录：./src/images/
         dist: DIST_DIR + 'images' // images文件build后存放的目录：./dist/images
     }
 };

 module.exports = Config;

build/gulpfile.init.js

 var gulp = require('gulp');
 var mkdirp = require('mkdirp');
 var Config = require('./gulpfile.config.js');
 //======= gulp init 初始化项目结构 ===============
 function init() {
     /**
      * 初始化项目结构
      */
     gulp.task('init', function() {
         var dirs = [Config.html.dir, Config.assets.dir, Config.css.dir, Config.sass.dir, Config.js.dir, Config.img.dir];
         dirs.forEach(dir => {
             mkdirp.sync(dir);
         });
     });
 }
 module.exports = init;