①確保電腦全局安裝了npm
? ??查看npm版本號：npm -v
②在項目根目錄中打開cmd：創(chuàng)建配置文件package.json
? ? ? ?npm init
③在項目中安裝gulp
????????npm install gulp --save-dev
④在項目中安裝gulp-sass
? ??????npm install gulp-sass --save-dev
gulp的使用：
①項目根目錄創(chuàng)建gulpfile.js（gulp項目的配置文件）
②安裝gulp-connect插件（創(chuàng)建服務(wù)器，監(jiān)聽文件變化，實現(xiàn)頁面自動刷新）
? ? ? ? ? ? npm install gulp-connect --save-dev
③安裝壓縮JS的插件gulp-uglify狼电，pump需要附帶安裝
? ? ? ? ? ? npm install gulp-uglify --save-dev
? ? ? ? ? ? npm install pump --save-dev
④安裝壓縮css的插件gulp-clean-css
? ? ? ? ? ? npm install gulp-clean-css --save-dev
⑤給css里的引用文件加版本號削祈，可以和④結(jié)合一起用
npm?install?gulp-make-css-url-version
⑥壓縮圖片
????????npm install gulp-imagemin?--save-dev
⑦深度壓縮圖片，可與⑥結(jié)合使用
? ? ? ?npm?install imagemin-pngquant?--save-dev
⑧只壓縮修改的圖片
? ? ? ? npm install gulp-cache --save-dev
⑨css背景圖生成雪碧圖
? ? ? ? ? ? npm install gulp-css-spriter --save-dev
使用注意：要合成的圖片在css中使用時不能設(shè)置background-position和background-size握爷，合成后會自動生成雪碧圖并計算好background-position的值的严里。
代碼設(shè)置參考：http://www.cnblogs.com/xbcq/p/5277850.html
⑩根據(jù)設(shè)置瀏覽器版本自動處理瀏覽器前綴
npm install gulp-autoprefixer?--save-dev
?使用babel編譯es6語法
npm install gulp-babel babel-core babel-preset-es2015--save-dev
?文件引入合并
npm?install?gulp-file-include --save-dev
?壓縮htmlmin
????npm install gulp-htmlmin --save-dev
?給頁面的引用添加版本號新啼，清除頁面引用緩存
?npm install gulp-rev-append --save-dev
其他：
重命名：npm install gulp-rename --save-dev
過濾文件：npm install gulp-filter --save-dev
刪除文件：npm install del --save-dev
合并文件：npm install gulp-concat --save-dev
package.json
{
? "name": "zufang",
? "version": "1.0.0",
? "description": "",
? "main": "index.js",
? "scripts": {
? ? "test": "echo \"Error: no test specified\" && exit 1"
? },
? "author": "",
? "license": "ISC",
? "devDependencies": {
? ? "babel-core": "^6.26.3",
? ? "babel-preset-es2015": "^6.24.1",
? ? "del": "^3.0.0",
? ? "gulp": "^3.9.1",
? ? "gulp-autoprefixer": "^5.0.0",
? ? "gulp-babel": "^7.0.1",
? ? "gulp-cache": "^1.0.2",
? ? "gulp-clean-css": "^3.9.4",
? ? "gulp-connect": "^5.5.0",
? ? "gulp-css-spriter": "^0.4.0",
? ? "gulp-file-include": "^2.0.1",
? ? "gulp-filter": "^5.1.0",
? ? "gulp-htmlmin": "^4.0.0",
? ? "gulp-imagemin": "^4.1.0",
? ? "gulp-make-css-url-version": "0.0.13",
? ? "gulp-rename": "^1.3.0",
? ? "gulp-rev-append": "^0.1.8",
? ? "gulp-sass": "^4.0.1",
? ? "gulp-uglify": "^3.0.0",
? ? "imagemin-pngquant": "^5.1.0",
? ? "pump": "^3.0.0"
? }
}
gulpfile.js
//引入插件
var gulp = require('gulp');
var sass = require('gulp-sass');
var connect = require('gulp-connect');
var uglify = require('gulp-uglify');
var pump = require('pump');
var cssmin = require('gulp-clean-css');
var cssver = require('gulp-make-css-url-version');
var imagemin = require('gulp-imagemin');
var pngquant = require('imagemin-pngquant');
var cache = require('gulp-cache');
var spriter = require('gulp-css-spriter');
var autoprefixer = require('gulp-autoprefixer');
var babel = require('gulp-babel');
var fileinclude = require('gulp-file-include');
var htmlmin = require('gulp-htmlmin');
var rev = require('gulp-rev-append');
var rename = require('gulp-rename');
var filter = require('gulp-filter');
var del = require('del');
//路徑變量
var path = {
? ? //開發(fā)環(huán)境
? ? src: {
? ? ? ? html: './src',
? ? ? ? js: './src/js',
? ? ? ? scss: './src/scss',
? ? ? ? css: './src/css',
? ? ? ? img: './src/img',
? ? ? ? font:'./src/font',
? ? ? ? includebase: './src/include' //include引用文件路徑
? ? },
? ? //發(fā)布環(huán)境
? ? dist: {
? ? ? ? html: './dist',
? ? ? ? js: './dist/js',
? ? ? ? scss: './dist/scss',
? ? ? ? css: './dist/css',
? ? ? ? img: './dist/img',
? ? ? ? font:'./dist/font',
? ? ? ? baseroot: './dist'
? ? }
};
//將scss文件編譯成css
gulp.task('scss', function() {
? ? return gulp.src(path.src.scss + '/*.scss', { style: 'expanded' })
? ? ? ? .pipe(cache(sass()))
? ? ? ? .pipe(gulp.dest(path.src.css))
? ? ? ? .pipe(connect.reload());
});
//壓縮css文件，css樣式加前綴
gulp.task('css', ['scss'], function() {
? ? var timestamp = new Date().getTime();
? ? return gulp.src(path.src.css + '/*.css')
? ? ? ? .pipe(autoprefixer({ //給樣式增加瀏覽器前綴
? ? ? ? ? ? // browsers:['last 2 versions','safari 5','ie 8', 'ie 9', 'opera 12.1','ff 15', 'ios 6','android 4'],
? ? ? ? ? ? browsers: ['>0.1%'],
? ? ? ? ? ? cascade: true, //是否美化屬性值
? ? ? ? ? ? remove: true //是否去掉不必要的前綴 默認true
? ? ? ? }))
? ? ? ? // .pipe(spriter({ //合成雪碧圖
? ? ? ? //? ? 'spriteSheet': path.dist.img + '/sprite_' + timestamp + '.png', // 生成的spriter的位置
? ? ? ? //? ? // 如下將生產(chǎn)：backgound:url(../images/sprite20324232.png)
? ? ? ? //? ? 'pathToSpriteSheetFromCSS': './../img/sprite_' + timestamp + '.png', //生成的樣式文件里面圖片引用地址的路徑
? ? ? ? // }))
? ? ? ? // .pipe(rename({ suffix: '.min' })) // 對管道里的文件流添加 .min 的重命名
? ? ? ? // .pipe(cssmin({
? ? ? ? //? ? advanced: false, //類型：Boolean 默認：true [是否開啟高級優(yōu)化（合并選擇器等）]
? ? ? ? //? ? compatibility: 'ie8', //保留ie8及以下兼容寫法 類型：String 默認：''or'*' [啟用兼容模式刹碾； 'ie7'：IE7兼容模式燥撞，'ie8'：IE8兼容模式，'*'：IE9+兼容模式]
? ? ? ? //? ? keepBreaks: true,
? ? ? ? //? ? keepSpecialComments: '*' //保留所有特殊前綴 當你用autoprefixer生成的瀏覽器前綴迷帜，如果不加這個參數(shù)物舒，有可能將會刪除你的部分前綴
? ? ? ? // }))
? ? ? ? .pipe(gulp.dest(path.dist.css))
? ? ? ? .pipe(connect.reload());
});
//壓縮圖片
gulp.task('image', function() {
? ? return gulp.src(path.src.img + '/**/*.{png,jpg,gif,ico}')
? ? ? ? .pipe(cache(imagemin({
? ? ? ? ? ? optiimizationLevel: 5, //類型：Number? 默認：3? 取值范圍：0-7（優(yōu)化等級）
? ? ? ? ? ? progressive: true, //類型：Boolean 默認：false 無損壓縮jpg圖片
? ? ? ? ? ? interlaced: true, //類型：Boolean 默認：false 隔行掃描gif進行渲染
? ? ? ? ? ? multipass: true, //類型：Boolean 默認：false 多次優(yōu)化svg直到完全優(yōu)化
? ? ? ? ? ? svgoPlugins: [{ removeViewBox: false }], //不要移除svg的viewbox屬性
? ? ? ? ? ? use: [pngquant()] //使用pngquant深度壓縮png圖片的imagemin插件
? ? ? ? })))
? ? ? ? .pipe(gulp.dest(path.dist.img))
});
/**
* 編譯css及復(fù)制壓縮圖片及雪碧圖后，再添加css引用文件的版本號
*/
// gulp.task('cssver',['css','image'], function(){
// return gulp.src(path.dist.css + '/*.css')
// .pipe(cssver())
// .pipe(gulp.dest(path.dist.css));
// });
// 壓縮js文件
gulp.task('js', function(cb) {
? ? var jsFilter = filter('**/*.min.js', { restore: true });
? ? pump([
? ? ? ? ? ? gulp.src(path.src.js + '/*.js'),
? ? ? ? ? ? jsFilter,
? ? ? ? ? ? gulp.dest(path.dist.js), //復(fù)制*.min.js文件到dist/js中
? ? ? ? ? ? jsFilter.restore,
? ? ? ? ? ? filter(['**/*', '!**/*.min.js']), // 篩選出管道中的非 *.min.js 文件戏锹，進行壓縮編譯
? ? ? ? ? ? babel({
? ? ? ? ? ? ? ? presets: ['es2015']
? ? ? ? ? ? }),
? ? ? ? ? ? // rename({ suffix: '.min' }), //重命名
? ? ? ? ? ? uglify(),
? ? ? ? ? ? gulp.dest(path.dist.js)
? ? ? ? ],
? ? ? ? cb
? ? );
});
//字體文件
// gulp.task('font',function(){
// return gulp.src(path.src.font + '/*')
// .pipe(gulp.dest(path.dist.font))
// .pipe(connect.reload());
// });
//壓縮html頁面冠胯，文件嵌入，頁面引用文件加版本號
gulp.task('html', ['js','css','image'], function() {
? ? var options = {
? ? ? ? removeComments: true, //清除HTML注釋
? ? ? ? collapseWhitespace: true, //壓縮HTML
? ? ? ? collapseBooleanAttributes: true,/*省略布爾屬性的值 input checked="true" ---- input */
? ? ? ? removeEmptyAttributes: true,/*刪除所有空格作屬性值 input id="" ==> input*/
? ? ? ? removeScriptTypeAttributes: true,/*刪除script的type=text/javascript*/
? ? ? ? removeStyleLinkTypeAttributes: true,/*刪除style和link的type=text/css*/
? ? ? ? minifyJS: true, //壓縮頁面JS
? ? ? ? minifyCSS: true //壓縮頁面CSS
? ? };
? ? return gulp.src(path.src.html + '/**/*.html')
? ? ? ? .pipe(fileinclude({ //文件嵌入
? ? ? ? ? ? prefix: '@@', //變量前綴 @@include
? ? ? ? ? ? basepath: path.src.includebase, //引用文件路徑
? ? ? ? ? ? indent: true //保留文件的縮進
? ? ? ? }))
? ? ? ? .pipe(rev()) //引用文件添加版本號
? ? ? ? .pipe(htmlmin(options))
? ? ? ? .pipe(gulp.dest(path.dist.html))
? ? ? ? .pipe(connect.reload());
});
//clean 清空dist目錄中文件
gulp.task('clean', function() {
? ? return del(path.dist.baseroot + '/**/*');
});
// build任務(wù)锦针，依賴清空任務(wù)
gulp.task('build', ['clean'], function() {
? ? gulp.start('html');
});
// 服務(wù)器監(jiān)聽
gulp.task('server', function() {
? ? connect.server({
? ? ? ? root: path.dist.html,
? ? ? ? port: 520,
? ? ? ? livereload: true
? ? })
? ? // 監(jiān)控文件荠察，有變動則執(zhí)行對應(yīng)方法
? ? gulp.watch(path.src.scss + '/*.scss', ['scss']);
? ? gulp.watch(path.src.css + './*.css', ['css']);
? ? gulp.watch(path.src.html + '/**/*.html', ['html']);
? ? gulp.watch(path.src.img + '/**/*', ['image']);
? ? gulp.watch(path.src.js + '/*.js', ['js']);
? ? // gulp.watch(path.src.font + '/*', ['font']);
});
cmd輸入 gulp server 開啟服務(wù)器
參考資料：
https://gulpjs.com/plugins/
