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: ,

             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;

巴特西

gulp配置 - PC

最新文章

热门文章