Skip to content
Branch: master
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
dist
src
README.md
gulpfile.js
package-lock.json
package.json
server.js

README.md

LazyPage 整合 gulp 支持热更新

GitHub Pages

https://github.com/fengshangbin/LazyPage/tree/master/examples/lazypage-gulp

如何运行

安装依赖

npm install

开始运行

npm run server

打包

npm run build

gulp 配置

安装 gulp 依赖

npm install --save-dev gulp

配置热更新 server

1, 安装 lazypage-node 依赖

npm install --save-dev lazypage-node express

2, 创建 server.js

var express = require('express');
var serverFilter = require('lazypage-node');

var app = express();
app.use(serverFilter.filter('src'));
app.use(express.static('src'));

app.listen(7000, function() {});

3, 安装 browserSync 依赖

npm install --save-dev browser-sync gulp-nodemon

4, 创建 browserSync 任务

var browserSync = require('browser-sync').create();
gulp.task('browserSync', function(cb) {
  nodemon({
    script: 'server.js',
    //ignore: ["gulpfile.js", "node_modules/", "public/**/*.*"],
    ext: 'html',
    env: {
      NODE_ENV: 'development'
    }
  }).on('start', function() {
    browserSync.init(
      {
        proxy: 'http://localhost:7000',
        //files: ['src/**/*.less', 'src/**/*.html', 'src/**/*.js'],
        port: 8183
      },
      function() {
        console.log('browser refreshed.');
      }
    );
    cb();
  });
});

编译 less

安装依赖

npm install --save-dev gulp-less

创建 gulp less 任务

var less = require('gulp-less');

gulp.task('less', function() {
  return gulp
    .src(['src/**/*.less', '!src/**/_*.less'])
    .pipe(less())
    .pipe(gulp.dest('src'))
    .pipe(
      browserSync.reload({
        stream: true
      })
    );
});

自动追加 css 前缀

安装依赖

npm install --save-dev gulp-autoprefixer

在上面的 less 任务中追加.pipe(autoprefixer())

var autoprefixer = require('gulp-autoprefixer');
...
    .pipe(less())
    .pipe(autoprefixer())
    .pipe(gulp.dest('src'))
...

在 package.json 中配置

"browserslist": [
    "last 2 versions",
    "Android >= 4.0"
]

监控文件变化

安装依赖

npm install --save-dev gulp-watch

创建 watch 任务

var watch = require('gulp-watch');
gulp.task('watch', function(cb) {
  watch('src/**/*.less', gulp.series('less'));
  watch('src/**/*.html', browserSync.reload);
  watch('src/**/*.js', browserSync.reload);
  cb();
});

创建热更新任务

gulp.task('server', gulp.series('browserSync', 'less', 'watch'));

静态文件版本控制

安装依赖

npm install --save-dev gulp-rev gulp-rev-collector
var rev = require('gulp-rev');
var revCollector = require('gulp-rev-collector');

追加文件版本号到文件名中,版本号为文件 md5 后的值

...
.pipe(rev())
.pipe(gulp.dest('dist'))
.pipe(rev.manifest())
...

替换文件引用路径为带版本号路径

...
.pipe(
    revCollector({
        replaceReved: true
    })
)
...

处理图片

gulp.task('image', function() {
  return gulp
    .src('src/**/*.{jpg,png,svg,gif}')
    .pipe(rev())
    .pipe(gulp.dest('dist'))
    .pipe(rev.manifest())
    .pipe(gulp.dest('dist/rev/image'));
});

处理 css

安装压缩 css 依赖

npm install --save-dev gulp-clean-css

创建 css 任务

var minifycss = require('gulp-clean-css');
gulp.task('css', function() {
  return gulp
    .src(['dist/rev/**/*.json', 'src/**/*.css'])
    .pipe(
      revCollector({
        replaceReved: true
      })
    )
    .pipe(minifycss())
    .pipe(rev())
    .pipe(gulp.dest('dist'))
    .pipe(rev.manifest())
    .pipe(gulp.dest('dist/rev/css'));
});

处理 js

安装压缩 js 依赖

npm install --save-dev gulp-uglify

创建 js 任务

var uglify = require('gulp-uglify');
gulp.task('js', function() {
  return gulp
    .src(['dist/rev/**/*.json', 'src/**/*.js'])
    .pipe(
      revCollector({
        replaceReved: true
      })
    )
    .pipe(uglify())
    .pipe(rev())
    .pipe(gulp.dest('dist'))
    .pipe(rev.manifest())
    .pipe(gulp.dest('dist/rev/js'));
});

创建 json 任务

gulp.task('json', function() {
  return gulp
    .src(['dist/rev/**/*.json', 'src/**/*.json'])
    .pipe(
      revCollector({
        replaceReved: true
      })
    )
    .pipe(gulp.dest('dist'));
});

处理 html

安装压缩 html 依赖

npm install --save-dev gulp-htmlmin

创建 html 任务

var htmlmin = require('gulp-htmlmin');
gulp.task('html', function() {
  return gulp
    .src(['dist/rev/**/*.json', 'src/**/*.html'])
    .pipe(
      revCollector({
        replaceReved: true
      })
    )
    .pipe(
      htmlmin({
        removeComments: true,
        collapseWhitespace: true,
        removeScriptTypeAttributes: true,
        removeStyleLinkTypeAttributes: true,
        minifyJS: true,
        minifyCSS: true
      })
    )
    .pipe(gulp.dest('dist'));
});

清理输出文件夹

安装文件删除依赖

npm install --save-dev del

创建删除任务

var del = require('del');
gulp.task('clean', function(cb) {
  return del('dist', cb);
});

拷贝其他资源

gulp.task('copy', function(cb) {
  gulp.src('src/**/*.{mp4,pdf,ico,woff2,woff,ttf}').pipe(gulp.dest('dist'));
  cb();
});

创建打包任务

gulp.task('build', gulp.series('clean', 'less', 'image', 'css', 'js', 'json', 'html', 'copy'));
You can’t perform that action at this time.