gulp配置

初始化目录结构如下（图片看不清可以拖到桌面或者直接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: 3,
            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: 3,
            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: 3000
    });

    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;