gulp 组件化

gulp　文件改名压缩改引用组件化

gulp组件化环境，ubuntu下使用IDE（webstorm\pycharm）编程

需要安装的文件内容放在package.json里面，可用命令npm install安装

package.json:

{  "name": "front-end-build-tool",  "version": "0.1.0",  "description": "提供前端资源压缩的一些功能",  "main": "index.js",  "repository": {    "type": "git",    "url": "git://github.com/iamjoel/front-end-build-tool"  },  "scripts": {    "test": "echo \"Error: no test specified\" && exit 1"  },  "keywords": [    "front-end",    "workflow"  ],  "author": "Joel",  "license": "ISC",  "devDependencies": {    "browser-sync": "^2.8.2",    "del": "~2.2.0",    "gulp": "~3.9.1",    "gulp-clean": "^0.3.1",    "gulp-concat": "~2.6.0",    "gulp-header": "^1.2.2",    "gulp-jshint": "^1.9.4",    "gulp-minify-css": "~1.2.4",    "gulp-rename": "~1.2.2",    "gulp-rev": "~7.0.0",    "gulp-rev-collector": "~1.0.3",    "gulp-strip-debug": "^1.0.2",    "gulp-uglify": "~1.5.3",    "gulp-watch": "^4.3.5",    "jshint-stylish": "^1.0.1"  }}

---

项目目录结构

project(项目名称)
|–node_modules 组件目录
|–build 发布环境
- |–css 样式文件(style.css style-MD5.css)
- |–images 图片文件(压缩图片)
- |–js js文件(main.js main-MD5.js)
- |–index.html 静态文件(压缩html)
|–src 开发环境
- |–css css文件
- |–images 图片文件
- |–js js文件
- |–index.html 静态文件
|–rev rev-manifest.json配置js、css文件
|–gulpfile.js gulp任务文件

---

可用npm install 安装npm有关依赖组件，下载package下的内容，具体见下文的 readme ；

gulpfile.js：

var gulp = require('gulp');var clean = require('gulp-clean');var uglify = require('gulp-uglify');var minifyCss = require('gulp-minify-css');var rename = require('gulp-rename');var header = require('gulp-header');var jshint = require('gulp-jshint');var stripDebug = require('gulp-strip-debug');var rev = require('gulp-rev');var pkg = require('./package.json');var revCollector = require('gulp-rev-collector');var banner = [    '/**',    ' ** @author <%= pkg.author %>',    ' ** @version v<%= pkg.version %>',    ' **/',    ''].join('\n');var SRC_PATH = 'src/';var DIST_PATH = 'build';var paths = {    js: [        SRC_PATH + '/**/*.js'    ],    css: [        SRC_PATH + '/**/*.css'    ],    image: [        SRC_PATH + '/**/*.png',        SRC_PATH + '/**/*.jpeg',        SRC_PATH + '/**/*.jpg',        SRC_PATH + '/**/*.gif'    ],    html: [        SRC_PATH + '/**/*.html'    ]};gulp.task('build', ['min-js', 'min-css', 'move-image', 'rev-html']);gulp.task('clean', function () {    return gulp.src(DIST_PATH, {            read: false        })        .pipe(clean());});gulp.task('min-js', ['clean-js'], function () {    return gulp.src(paths.js)        .pipe(jshint('.jshintrc'))        .pipe(jshint.reporter('jshint-stylish'))        .pipe(stripDebug())        .pipe(uglify())        .pipe(rev())        .pipe(gulp.dest(DIST_PATH))        .pipe(rev.manifest('js.json'))                                           .pipe(gulp.dest('./rev'));});gulp.task('min-css', ['clean-css'], function () {    return gulp.src(paths.css)        .pipe(minifyCss())        .pipe(rev())        .pipe(gulp.dest(DIST_PATH))        .pipe(rev.manifest('css.json'))                                           .pipe(gulp.dest('./rev'));});gulp.task('move-image', ['clean-image'], function () {    return gulp.src(paths.image)        .pipe(gulp.dest(DIST_PATH));});var browserSync = require('browser-sync').create();gulp.task('browser-sync', function () {    browserSync.init({        files: "**",        server: {            baseDir: "./src/"        }    });});gulp.task('clean-js', function () {    return gulp.src(DIST_PATH + '/**/*.js', {            read: false        })        .pipe(clean());});gulp.task('clean-css', function () {    return gulp.src(DIST_PATH + '/**/*.css', {            read: false        })        .pipe(clean());});gulp.task('clean-html', function () {    return gulp.src(DIST_PATH + '/**/*.html', {            read: false        })        .pipe(clean());});gulp.task('clean-image', function () {    return gulp.src(DIST_PATH + '/**/*.png', {            read: false        })        .pipe(clean());});gulp.task('watch', function (cb) {    watch(paths.css, function () {        gulp.start('min-css');    }, cb);    watch(paths.js, function () {        gulp.start('min-js');    }, cb);    watch(paths.image, function () {        gulp.start('move-image');    }, cb);    watch(paths.html, function () {        gulp.start('rev-html');    }, cb);});gulp.task('rev-html', function () {    gulp.src(['./rev/*.json', './src/**/*.html'])           .pipe(revCollector())                                           .pipe(gulp.dest(DIST_PATH));                     });gulp.task('server', ['browser-sync']);gulp.task('default', ['build', 'watch']);

　此gulp在原基础上，增加了通过用rev函数生成md5的方式，在文件更改时候，更改其md5值来修改其名字，消除缓存造成的调试等问题。
　
　原功能为清除文件夹内容，压缩文件至空文件夹中。

增加了watch监视的功能，当css js imge html文件有修改的时候，会自动更新压缩文件，使其趋于自动化(增加了gulp-watch组件)

gulp组件化内容：css压缩改名、js混淆压缩改名、html内引用路径相应更名；通过更改css、js内容时md5值改变，从而改变名字解决了微信 缓存的问题以及减少css、js所占用的空间

---

readme：

1.安装gulp相关组件 - 可用上述package.json文件，命令行输入`nmp install`安装组件 - 可使用   1.npm install gulp gulp-concat  gulp-rev gulp-rev-collector gulp-minify-css gulp-concat gulp-uglify gulp-rename del gulp-watch --save-dev   2.nmp init  安装和初始化gulp组件，并生成package.json文件2.如果只需要对css压缩和更名，只需运行 gulp min-css3.如果需要对整个开发环境操作，只需运行 gulp build

文章框架来自转载，因需求已修改gulp组件化内容