以前被grunt的各類配置搞得頭大,後來發現竟然有gulp這樣的好東西,因而就入坑了css
npm init
全局安裝(由於要使用gulp命令)html
npm i gulp -g
項目安裝(固然是項目須要咯)node
npm i gulp --save-dev
i:install簡寫
--save-dev:自動添加到devdependenciesweb
gulp-sequence 順序執行ajax
gulp-jshint js語法檢測npm
gulp-imagemin 圖片壓縮json
imagemin-pngquant 圖片壓縮(png)gulp
gulp-clean-css css壓縮緩存
gulp-uglify js壓縮webstorm
gulp-htmlmin html壓縮(js、css壓縮)
gulp-minify-html html壓縮(js模板壓縮)
gulp-rev MD5版本號
gulp-rev-collector 版本替換
gulp-cache 緩存
npm i gulp-sequence --save-dev
安裝gulp-jshint要注意須要額外安裝下jshint
安裝好後咱們的package.json文件內容就以下所示啦:
{ "name": "gulp-study", "version": "1.0.0", "description": "gulp study", "main": "gulpfile.js", "keywords": [ "gulp" ], "author": "xiaomeng", "license": "ISC", "devDependencies": { "gulp": "^3.9.1", "gulp-cache": "^0.4.5", "gulp-clean-css": "^2.0.11", "gulp-htmlmin": "^2.0.0", "gulp-imagemin": "^3.0.2", "gulp-jshint": "^2.0.1", "gulp-minify-html": "^1.0.6", "gulp-rev": "^7.1.0", "gulp-rev-collector": "^1.0.5", "gulp-sequence": "^0.4.5", "gulp-uglify": "^1.5.4", "imagemin-pngquant": "^5.0.0", "jshint": "^2.9.2" } }
gulpfile.js文件內容
var gulp = require("gulp"), sequence = require("gulp-sequence"),//順序執行 jsHint = require("gulp-jshint"),//js語法檢測 minImage = require("gulp-imagemin"),//圖片壓縮 minImageForPng = require("imagemin-pngquant"),//圖片壓縮(png) minCss = require("gulp-clean-css"),//css壓縮 minJs = require("gulp-uglify"),//js壓縮 minHtml = require("gulp-htmlmin"),//html壓縮(js、css壓縮) minHtmlForJT = require("gulp-minify-html"),//html壓縮(js模板壓縮) rev = require("gulp-rev"),//MD5版本號 revCollector = require("gulp-rev-collector"),//版本替換 cache = require("gulp-cache");//緩存 //配置 var config = { //資源文件 source: { //源文件 src: { font: "src/font/*", css: "src/css/*.css", ajaxJs: "src/ajaxJs/*.js", js: "src/js/*.js", images: "src/images/*.{png,jpg,gif,ico}", html: "src/html/*.html" }, //MD5版本號文件 rev: { font: "rev/font/*.json", css: "rev/css/*.json", ajaxJs: "rev/ajaxJs/*.json", js: "rev/js/*.json" }, //替換版本後的文件 revCollector: { css: "revCollector/css/*.css", html: "revCollector/html/*.html" } }, //目錄 dir: { //MD5版本號文件目錄 rev: { font: "rev/font", css: "rev/css", ajaxJs: "rev/ajaxJs", js: "rev/js" }, //替換版本後的文件目錄 revCollector: { css: "revCollector/css", html: "revCollector/html" }, //正式文件目錄 dist: { css: "dist/css", ajaxJs: "dist/ajaxJs", js: "dist/js", images: "dist/images", html: "dist/html" } } }; //任務 var task = { jsHint: "jsHint", revFont: "revFont", revCss: "revCss", revAjaxJs: "revAjaxJs", revJs: "revJs", revCollectorCss: "revCollectorCss", revCollectorHtml: "revCollectorHtml", minCss: "minCss", minAjaxJs: "minAjaxJs", minJs: "minJs", minHtml: "minHtml", minImage: "minImage" }; //js語法檢測 gulp.task(task.jsHint, function () { gulp.src([config.source.src.ajaxJs]) .pipe(jshint()) .pipe(jshint.reporter()); }); //MD5版本號 gulp.task(task.revFont, function () { return gulp.src(config.source.src.font) .pipe(rev()) .pipe(rev.manifest()) .pipe(gulp.dest(config.dir.rev.font)); }); gulp.task(task.revCss, function () { return gulp.src(config.source.src.css) .pipe(rev()) .pipe(rev.manifest()) .pipe(gulp.dest(config.dir.rev.css)); }); gulp.task(task.revAjaxJs, function () { return gulp.src(config.source.src.ajaxJs) .pipe(rev()) .pipe(rev.manifest()) .pipe(gulp.dest(config.dir.rev.ajaxJs)); }); gulp.task(task.revJs, function () { return gulp.src(config.source.src.js) .pipe(rev()) .pipe(rev.manifest()) .pipe(gulp.dest(config.dir.rev.js)); }); //版本替換 /** * 對插件進行以下修改,使得引用資源文件的url得以以下變換: * "/css/base-f7e3192318.css" >> "/css/base.css?v=f7e3192318" * * gulp-rev 1.0.5 * node_modules\gulp-rev\index.js * 144 manifest[originalFile] = revisionedFile; => manifest[originalFile] = originalFile + '?v=' + file.revHash; * * gulp-rev 1.0.5 * node_modules\gulp-rev\node_modules\rev-path\index.js * 10 return filename + '-' + hash + ext; => return filename + ext; * * gulp-rev-collector 7.1.0 * node_modules\gulp-rev-collector\index.js * 31 if ( !_.isString(json[key]) || path.basename(json[key]).replace(new RegExp( opts.revSuffix ), '' ) !== path.basename(key) ) { => * if ( path.basename(json[key]).split('?')[0] !== path.basename(key) ) { * */ gulp.task(task.revCollectorCss, function () { return gulp.src([config.source.rev.font, config.source.src.css]) .pipe(revCollector()) .pipe(gulp.dest(config.dir.revCollector.css)); }); gulp.task(task.revCollectorHtml, function () { return gulp.src([config.source.rev.css, config.source.rev.ajaxJs, config.source.rev.js, config.source.src.html]) .pipe(revCollector()) .pipe(gulp.dest(config.dir.revCollector.html)); }); //壓縮文件 gulp.task(task.minCss, function () { return gulp.src(config.source.revCollector.css) .pipe(minCss()) .pipe(gulp.dest(config.dir.dist.css)); }); gulp.task(task.minAjaxJs, function () { return gulp.src(config.source.src.ajaxJs) .pipe(minJs()) .pipe(gulp.dest(config.dir.dist.ajaxJs)); }); gulp.task(task.minJs, function () { return gulp.src(config.source.src.js) .pipe(minJs()) .pipe(gulp.dest(config.dir.dist.js)); }); gulp.task(task.minHtml, function () { return gulp.src(config.source.revCollector.html) .pipe(minHtmlForJT())//附帶壓縮頁面上的js模板 .pipe(minHtml({ removeComments: true, collapseWhitespace: true, collapseBooleanAttributes: true, removeEmptyAttributes: true, removeScriptTypeAttributes: true, removeStyleLinkTypeAttributes: true, minifyJS: true, minifyCSS: true }))//附帶壓縮頁面上的css、js .pipe(gulp.dest(config.dir.dist.html)); }); gulp.task(task.minImage, function () { return gulp.src(config.source.src.images) .pipe(cache(minImage({ progressive: true, use: [minImageForPng()] }))) .pipe(gulp.dest(config.dir.dist.images)); }); //正式構建 gulp.task("build", sequence( //js語法檢測 //[task.jsHint], //MD5版本號 [task.revFont, task.revCss, task.revAjaxJs, task.revJs], //版本替換 [task.revCollectorCss, task.revCollectorHtml], //壓縮文件 [task.minCss, task.minAjaxJs, task.minJs, task.minHtml, task.minImage] )); gulp.task("default", ["build"], function () { });
執行默認任務
gulp
執行指定任務
gulp 任務名稱
目錄說明
dist
ajaxJs
css
html
images
js
node_modules
rev
ajaxJs
css
font
js
revCollector
css
html
src
ajaxJs
css
html
images
js
gulpfile.js
package.json
使用npm安裝模塊速度有些慢,能夠使用淘寶的cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
重要的在這裏:
cnpm安裝的模塊用webstorm打開時會形成webstorm卡死(對,個人就是卡死了)
解決方法:百度的(-_-)