gulp打包jquery使用记录

1.gulp通用配置

打包插件

  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-preset-es2015": "^6.24.1",
    "gulp": "^3.9.1",
    "gulp-babel": "^7.0.1",
    "gulp-copy": "^1.0.1",
    "gulp-htmlmin": "^3.0.0",
    "gulp-uglify": "^3.0.2"
  },
  "dependencies": {
    "gulp-changed": "^4.0.2",
    "gulp-jshint": "^2.1.0",
    "gulp-minify-css": "^1.2.4",
    "gulp-sass": "^4.0.2"
  }

插件配置-----gulpfile.js

const gulp = require('gulp')
const htmlmin = require('gulp-htmlmin')
const minifyCss = require('gulp-minify-css')
const sass = require('gulp-sass')
// 压缩javascript文件，减小文件大小
const uglify = require('gulp-uglify');
// es6转es5
const babel = require('gulp-babel');
const changed = require('gulp-changed')

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

gulp.task('sassTask', function() {
    gulp.src('src/sass/*.scss')//打包之前sass路径
        .pipe(sass().on('error',sass.logError))
        .pipe(minifyCss())
        .pipe(gulp.dest('src/css'))
        .pipe(gulp.dest('dist/css'))
})

gulp.task('JsTask', function () {
    gulp.src(['src/js/*.js'])
        .pipe(babel({
            presets: ['es2015'] // es5检查机制
        }))
        .pipe(uglify()) // 使用uglify进行压缩，并保留部分注释
        .pipe(gulp.dest('dist/js'));
})

gulp.task('copyTask', function () {
    gulp.src('src/assets/*')
        .pipe(gulp.dest('dist/assets'))
})

// 监听任务
gulp.task('watch', function(){
    // 监听 html
    gulp.watch('src/html/*.html', ['htmlTask'])
    // 监听 js
    gulp.watch('src/js/*.js', ['JsTask'])
    // 监听 css
    gulp.watch('src/css/*.scss', ['sassTask'])
})

gulp.task('default',['copyTask', 'htmlTask', 'sassTask', 'JsTask', 'watch'])

以上配置针对如下目录结构,其中src为源码目录

2.require使用

采用AMD来开发，使用require，下载好require后按如下方式引入js文件 一下是基础文件引入

<script src="../assets/require.js" defer async="true" ></script>
<script src="../assets/require.js" data-main="../js/index"></script>

页面逻辑代码

// 依赖插件引入
require.config({
    paths: {
        "jquery": "../assets/jquery.min",
        "lazyload": "../assets/jquery.lazyload.min",
        "nicescroll": "../assets/jquery.nicescroll.min"
    },
    shim: {             // 非模块化开发文件需要这一步操作
        'lazyload': ['jquery']
    }
});
define(['jquery','nicescroll','lazyload'], function($){
    let page = {
        init: function(){
            const self = this;
            self.initData();
            self.initEvent();
        },
        initData: function(){
            const self = this;
        },
        initEvent: function(){
            const self = this;
            $('.parent').on('click','.children', function(){
                console.log(123)
            })
        }
    }
    page.init()
})

3.处理完相关配置后执行

gulp

demo

github