gulp配置零碎笔记
1、gulp生成雪碧图
//生成sprites图片和样式表
gulp.task('sprite', function () {
var spriteData = gulp.src('./src/img/icon/*.png').pipe(spritesmith({
imgName: 'sprite.png',
cssName: 'sprite.css',
imgPath: '../img/sprite.png',
padding:5
}))
.pipe(gulpif('*.png', gulp.dest('./dist/img/')))
.pipe(gulpif('*.css', gulp.dest('./dist/css/')))
return spriteData
});
2、gulp完成配置
(function () { 'use strict'; const gulp = require('gulp'); const chalk = require('chalk'); const changed = require('gulp-changed'); // 只编译改动过的文件 const sass = require('gulp-sass'); // 编译sass const sourcemaps = require('gulp-sourcemaps'); const fileinclude = require('gulp-file-include'); const autoprefixer = require('gulp-autoprefixer'); // css浏览器前缀补全 const cleancss = require('gulp-clean-css'); // 压缩css const rename = require('gulp-rename'); // 文件重命名 const uglify = require('gulp-uglify'); // 压缩js const babel = require('gulp-babel'); //es6转义 const imagemin = require('gulp-imagemin'); // 压缩图片 const cache = require('gulp-cache'); // 只压缩修改的图片 const concat = require("gulp-concat"); // 合并文件 const plumber = require('gulp-plumber'); //阻止gulp进程中断 const jshint = require("gulp-jshint"); //检验代码 const del = require('del'); const path = require('path'); const gulpif = require('gulp-if'); const sequence = require('gulp-sequence'); const spritesmith=require('gulp.spritesmith');//生成sprites图片和样式表 const browserSync = require('browser-sync').create(); // 静态服务器 const reload = browserSync.reload; const proxyMiddleware = require('http-proxy-middleware'); const fontSpider = require('gulp-font-spider'); //字蛛 const Config = require('./gulpfile.config.js'); //路径配置文件 const env = process.env.NODE_ENV || 'development' const condition = env === 'production' function cbTask(task) { return new Promise((resolve, reject) => { del(['./dist/**']) .then(paths => { console.log(chalk.green(` ----------------------------- Clean tasks are completed -----------------------------`)) sequence(task, () => { console.log(chalk.green(` ----------------------------- All tasks are completed -----------------------------`)) resolve('completed') }) }) }) } // font字体处理 gulp.task('font', function () { return gulp .src(Config.font.src) .pipe(changed(Config.font.dist)) .pipe(gulp.dest(Config.font.dist)); }); // HTML处理 gulp.task('html', function () { return gulp .src(Config.html.src) .pipe(fileinclude({ prefix: '@@',//变量前缀 @@include basepath: './src/include/',//引用文件路径 indent: true//保留文件的缩进 })) // .pipe(changed(Config.allhtml.dist)) //.pipe(fontSpider()) //字体转换 .pipe(gulp.dest(Config.html.dist)); }); // SASS样式处理 gulp.task('sass', function () { return gulp .src(Config.sass.src) .pipe(gulpif(!condition,sourcemaps.init())) // .pipe(sourcemaps.init()) .pipe(plumber()) .pipe(sass({ outputStyle: 'expanded' }).on('error', sass.logError)) .pipe(autoprefixer({ browsers: ['last 4 versions', 'Android >= 4', 'Chrome >= 20', 'Firefox >= 24', 'Explorer >= 8', 'iOS >= 6', 'Opera >= 12', 'Safari >= 6' ], cascade: true, //美化属性，默认true add: true, //是否添加前缀，默认true remove: true, //删除过时前缀，默认true flexbox: true //为flexbox属性添加前缀，默认true })) .pipe(gulpif(condition, cleancss({ debug: true }))) // .pipe(cleancss()) .pipe(gulpif(!condition,sourcemaps.write('./maps'))) .pipe(gulp.dest(Config.sass.dist)) .pipe(reload({ stream: true })); }); // CSS样式处理 gulp.task('css', function () { return gulp .src(Config.css.src) .pipe(autoprefixer({ browsers: ['last 4 versions', 'Android >= 4', 'Chrome >= 20', 'Firefox >= 24', 'Explorer >= 8', 'iOS >= 6', 'Opera >= 12', 'Safari >= 6' ] })) .pipe(gulpif(condition, cleancss({ debug: true }))) .pipe(gulp.dest(Config.css.dist)) .pipe(reload({ stream: true })); }); //生成sprites图片和样式表 gulp.task('sprite', function () { var spriteData = gulp.src('./src/img/icon/*.png').pipe(spritesmith({ imgName: 'sprite.png', cssName: 'sprite.css', imgPath: '../img/sprite.png', padding:5 })) .pipe(gulpif('*.png', gulp.dest('./dist/img/'))) .pipe(gulpif('*.css', gulp.dest('./dist/css/'))) return spriteData }); // 编译js gulp.task('js', function () { return gulp .src(Config.js.src) .pipe(babel({ presets: ['env'] })) .pipe(jshint()) .pipe(jshint.reporter('default')) .pipe(changed(Config.js.dist)) .pipe(gulp.dest(Config.js.dist)) .pipe(reload({ stream: true })) //.pipe(concat(Config.js.build_name)) //.pipe(gulp.dest(Config.js.dist)) // .pipe(uglify()) .pipe(gulpif(condition, uglify())) .pipe(gulpif(condition,rename(function (path) { path.basename += '.min'; path.extname = '.js'; }))) // .pipe(rename(function (path) { // path.basename += '.min'; // path.extname = '.js'; // })) .pipe(gulp.dest(Config.js.dist)); }); // 编译第三方插件js gulp.task('staticjs', function () { return gulp .src(Config.staticjs.src) // .pipe(jshint()) // .pipe(jshint.reporter('default')) .pipe(changed(Config.staticjs.dist)) .pipe(gulp.dest(Config.staticjs.dist)) .pipe(reload({ stream: true })) }); // 图片处理 gulp.task('img', function () { return gulp .src(Config.img.src) .pipe(changed(Config.img.dist)) .pipe(cache(imagemin([ imagemin.gifsicle({ interlaced: true }), imagemin.jpegtran({ progressive: true }), imagemin.optipng({ optimizationLevel: 5 }), imagemin.svgo({ plugins: [{ removeViewBox: true }] }) ]))) .pipe(gulp.dest(Config.img.dist)) .pipe(reload({ stream: true })); }); let middleware = proxyMiddleware('/api', { target: 'http://wh.xhd.cn', // target: 'http://192.168.16.181:8080', changeOrigin: true, pathRewrite: { '^/api': '/api' } }); // 静态服务器 gulp.task('run', function () { browserSync.init({ port: 888, server: { baseDir: Config.dist, middleware: middleware }, // browser: '', // open: false, injectChanges: true // 注入CSS改变 }); // gulp.watch(Config.html.src, ['html']).on('change', reload); gulp.watch(Config.allhtml.src, ['html']).on('change', reload); gulp.watch(Config.font.src, ['font']); gulp.watch(Config.css.src, ['css']); gulp.watch(Config.sass.src, ['sass']); gulp.watch(Config.js.src, ['js']); gulp.watch(Config.staticjs.src, ['staticjs']); // gulp.watch(Config.includeHtml.src, ['html']).on('change', reload); gulp.watch('src/img/**/*', ['img','sprite']); }); // gulp.task('default', ['html', 'css', 'font', 'sass', 'js', 'img', 'run','staticjs']); gulp.task('server', () => { const task = ['html', 'css', 'font', 'sass', 'js', 'img', 'staticjs','sprite'] cbTask(task).then(() => { // browserSync.init(config.server) console.log(chalk.cyan(' Server complete.\n')) gulp.start('html') gulp.start('run') }) }) gulp.task('build', () => { const task = ['html', 'css', 'font', 'sass', 'js', 'img', 'staticjs','sprite'] cbTask(task).then(() => { console.log(chalk.cyan(' Build complete.\n')) gulp.start('html') }) }) gulp.task('default', () => { console.log(chalk.green( ` Build Setup 开发环境： npm run dev 生产环境： npm run build ` )) }) })();
package.json里设置如下
"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev": "gulp server", "build": "cross-env NODE_ENV=production gulp build" },
