gulp 简单框架

gulp 实现简单的前端页面开发自动化。

主要提供3个功能： 1. 修改后制动刷新页面。2. 压缩css。3.压缩js, 并提供sourcemap。

主要流程参考：

[使用 Gulp 搭建轻量级前端开发环境](https://www.ibm.com/developerworks/cn/web/wa-using-gulp-to-build-lightweight-frontend-environment/index.html)

修改后的gulpfile.js 

const Gulp = require('gulp');
const Minifycss = require('gulp-minify-css');
const Uglify = require('gulp-uglify');
const FileInclude = require('gulp-file-include');
const Watch = require('gulp-watch');
const WebServer = require('gulp-webserver');
const RunSequence = require('gulp-run-sequence');
const Clean = require('gulp-clean');
var sourcemaps = require('gulp-sourcemaps');
 
const Dist = 'build/example';
 
Gulp.task('copy-html', () => {
    return Gulp.src('src/view/*.html')
        .pipe(FileInclude({
            prefix: '##',
            basepath: '@file'
        })).on('error', function(err) {
            console.error('Task:copy-html,', err.message);
            this.end();
        }).pipe(Gulp.dest(Dist));
});

Gulp.task('copy-js', () => {
    Gulp.src(['./src/js/**/*.js'])
        .pipe(sourcemaps.init())
        .pipe(Uglify().on('error', function(e){
            console.log(e);
        }))
        .pipe(sourcemaps.write('../maps'))
        .pipe(Gulp.dest(Dist + '/js'));
});

Gulp.task('copy-css', () => {
    Gulp.src(['src/css/**/*']).pipe(Minifycss()).pipe(Gulp.dest(Dist + '/css'));
});
 
Gulp.task('copy-images', () => {
    Gulp.src(['src/img/**/*']).pipe(Gulp.dest(Dist + '/img'));
});

Gulp.task('watch', () => {
    Gulp.watch('src/view/*', ['copy-html']);
    Gulp.watch('src/js/**', ['copy-js']);
    Gulp.watch('src/css/*', ['copy-css']);
    Gulp.watch('src/img/*', ['copy-images']);
});
 
Gulp.task('copy-sources', ['copy-css','copy-js','copy-html', 'copy-images']);
 
Gulp.task('web-server', () => {
    Gulp.src(Dist).pipe(WebServer({
        port: 8180,
        host: 'localhost',
        livereload: true,
        open: 'http://localhost:8180/index.html'
    }));
});
 
Gulp.task('clean', () => {
    return Gulp.src(Dist).pipe(Clean());
});
 
Gulp.task('start', () => {
    RunSequence('clean', ['copy-sources', 'watch'], 'web-server'); // RunSequence是用来设置任务串行执行，因为有些任务是有先后顺序依赖，[]内的并行执行，()内的串行执行
});
 
Gulp.task('default', ['start']);

 

修改后的package.json

{
  "name": "my_gulp",
  "version": "1.0.0",
  "description": "my gulp",
  "main": "index.js",
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-clean": "^0.4.0",
    "gulp-file-include": "^2.0.1",
    "gulp-minify-css": "^1.2.4",
    "gulp-run-sequence": "^0.3.2",
    "gulp-sourcemaps": "^2.6.5",
    "gulp-uglify": "^3.0.0",
    "gulp-watch": "^5.0.0",
    "gulp-webserver": "^0.9.1"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "jiangdongke",
  "license": "MIT"
}