Skip to content
A gulp practice project
Branch: master
Clone or download
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
rev
src
.babelrc
.gitignore
README.md
gulpfile.babel.js
package.json

README.md

gulp practice

Node: v6.10.0

相关文档

Gulp中文网 - 如何开始使用 gulp

入门指南 - 学习 gulp 的输入和输出方式

搜索 gulp 插件

在 npm 查看所有插件

Browsersync / 说明文档

实战

package.json

{
  "name": "gulp-practice",
  "version": "0.1.0",
  "description": "A gulp practice project",
  "main": "index.js",
  "repository": {
    "type": "git",
    "url": ""
  },
  "keywords": [],
  "author": "Mark Zhang",
  "license": "MIT",
  "bugs": {
    "url": ""
  },
  "homepage": "",
  "devDependencies": {
    "babel-preset-env": "^1.6.0",
    "browser-sync": "^2.18.13",
    "gulp-babel": "^7.0.0",
    "gulp-ejs": "^3.0.1",
    "gulp-imagemin": "^3.3.0",
    "gulp-load-plugins": "^1.5.0",
    "gulp-rename": "^1.2.2",
    "gulp-rev": "^8.0.0",
    "gulp-rev-collector": "^1.2.2",
    "gulp-sourcemaps": "^2.6.1",
    "imagemin-pngquant": "^5.0.1"
  },
  "dependencies": {
    "babel-core": "^6.23.1",
    "babel-preset-es2015": "^6.22.0",
    "del": "^2.2.2",
    "gitment": "0.0.3",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^3.1.1",
    "gulp-clean-css": "^3.0.2",
    "gulp-concat": "^2.6.1",
    "gulp-less": "^3.3.0",
    "gulp-sequence": "^0.4.6",
    "gulp-uglify": "^3.0.0"
  }
}

项目目录

	gulp-practice
        │
        ├──dist						文件输出目录
        ├──rev						生成版本号文件夹
        ├──src						资源文件夹
        │	  ├──css				css文件夹
        │	  ├──images				图片
        │	  ├──js					js文件夹
        │	  ├──template				模版文件
        │	  ├──views				增加版本号后的模版文件
        ├──.babelrc					babel配置
        ├──.gitignore 					git忽略项
        ├──gulpfile.babel.js				gulp配置
        ├──package.json
        ├──README.md

.babelrc

设置babel选项,以下选项设置为可使用es2015语法

{
  "presets": [
    "es2015"
  ]
}

gulpfile.babel.js

正常情况下此文件的名称是gulpfile.js,由于我们使用了babel来实现在gulpfile.js里使用__es2015__语法,所以要将gulpfile.js改为gulpfile.babel.js

//导入gulp
import gulp from 'gulp';
//压缩js
import uglify from 'gulp-uglify';
//源文件映射
import sourcemaps from 'gulp-sourcemaps';
//合并文件
import concat from 'gulp-concat';
//处理less文件
import less from 'gulp-less';
//压缩图片
import imagemin from 'gulp-imagemin';
//压缩png
import pngquant from 'imagemin-pngquant';
//压缩css
import cleanCss from 'gulp-clean-css';
//增加css前缀
import autoprefixer from 'gulp-autoprefixer';
//删除文件
import del from 'del';
//任务执行队列
import sequence from 'gulp-sequence';
//重命名文件名称
import rename from 'gulp-rename';
//处理ejs文件
import ejs from 'gulp-ejs';
//生成版本号
import rev from 'gulp-rev';
//关联html中,引入资源的版本号
import revCollector from 'gulp-rev-collector';
//将es6语法编译成es5语法
import babel from 'gulp-babel'
//浏览器同步工具
import browserSync from 'browser-sync'

// 清理目录
gulp.task('clean', () => del(['./dist/*','./src/views/*'], {dot: true}));

//copy 复制文件
gulp.task('copy', () => gulp.src(['./src/js/lib/jquery.min.js'])
    .pipe(concat('lib.js'))
    .pipe(gulp.dest('./dist/js'))
);

//image 压缩图片
gulp.task('image', () => gulp.src('./src/images/**/*')
    .pipe(imagemin({
        progressive: true, //类型:Boolean 默认:false 无损压缩jpg图片
        optimizationLevel: 3, //类型:Number  默认:3  取值范围:0-7(优化等级)
        use: [pngquant()]
    }))
    .pipe(gulp.dest('./dist/images'))
)

//ejs文件输出为html
gulp.task('postejs', () => gulp.src(['./src/views/*.ejs'])
    .pipe(ejs({}, {}, {ext: '.html'}))
    .pipe(gulp.dest('./dist/'))
);

//css 处理less
gulp.task('postcss', function () {
    return gulp.src('./src/css/style.less')
        .pipe(less())
        .pipe(autoprefixer({browsers: [
            'ie >= 9',
            'ie_mob >= 10',
            'ff >= 30',
            'chrome >= 34',
            'safari >= 7',
            'opera >= 23',
            'ios >= 7',
            'android >= 2.3',
            'bb >= 10'
        ]}))
        .pipe(cleanCss())
        .pipe(rev())
        .pipe(gulp.dest('./dist/css'))
        .pipe(rev.manifest())
        .pipe(gulp.dest('rev/css'))
});

//uglifyjs 压缩js
gulp.task('uglifyjs', () => gulp.src('./src/js/*.js')
    .pipe(sourcemaps.init())
    .pipe(babel({
        presets: ['env']
    }))
    .pipe(uglify())
    .pipe(rev())
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('./dist/js'))
    .pipe(rev.manifest())
    .pipe(gulp.dest('rev/js'))
);

//静态资源版本控制
gulp.task('rev',() =>gulp.src(['rev/**/*.json','./src/templates/**/*.ejs'])
    .pipe(revCollector({
        replaceReved:true
    }))
    .pipe(gulp.dest('./src/views'))
)

/*
* 执行watch
* */
gulp.task('execEjs',(cb) => sequence('rev','postejs',cb))
gulp.task('execCss',(cb) => sequence('postcss','execEjs',cb))
gulp.task('execJs',(cb) => sequence('uglifyjs','execEjs',cb))

// watch 监控
gulp.task('watch', () => {
    browserSync.init({
        server: "./dist"
    });
    gulp.watch('./src/templates/**/*.ejs',['execEjs']);
    gulp.watch('./src/css/**/*.less',['execCss']);
    gulp.watch('./src/js/*.js',['execJs']);
    gulp.watch('./src/images/**/*',['image']);
    gulp.watch("dist/*.html").on('change', browserSync.reload);
});

//build
gulp.task('build', (cb) => sequence('copy', 'image', 'postcss', 'uglifyjs','rev','postejs', cb));

//default
gulp.task('default', (cb) => sequence('clean', 'build', cb));

//dev
gulp.task('dev', ['build', 'watch'], (cb) => (cb));

执行

$ cd gulp-practice
$ npm install
$ gulp dev		开发模式
或者
$ gulp			build模式
You can’t perform that action at this time.