前端自动化之gulp最佳实践，快速构建自己的自动化工具，是学习gulp最好指南!
将重复工作抽象成一个个的任务，机械化处理这些重复的任务。
var gulpLoadPlugins = require('gulp-load-plugins');
var pg = gulpLoadPlugins();
pg.jshint //插件帮我自动加载require('gulp-jshint');
pg.concat //插件帮我自动加载require('gulp-concat');// rename via hash
gulp.src("./src/main/text/hello.txt", { base: process.cwd() })
.pipe(rename({
dirname: "main/text/ciao",
basename: "aloha",
prefix: "bonjour-",
suffix: "-hola",
extname: ".md"
}))
.pipe(gulp.dest("./dist"));
// ./dist/main/text/ciao/bonjour-aloha-hola.md gulp.task('javascript', function() {
return gulp.src('src/**/*.js')
.pipe(sourcemaps.init())
.pipe(concat('all.js'))
.pipe(sourcemaps.write())
.pipe(gulp.dest('dist'));
});<!-- build:<pipelineId>(alternate search path) <path> -->
pipelineId:html/css/js或inlinecss、inlinejs、remove
path:新文件路径或文件名
<!-- endbuild -->
例如：
<!-- build:css style.css -->
<link rel="stylesheet" href="css/clear.css"/>
<link rel="stylesheet" href="css/main.css"/>
<!-- endbuild -->gulp.task('usemin', function() {
return gulp.src('./*.html')
.pipe(usemin({
css: [ rev ],
html: [ function () {return htmlmin({ collapseWhitespace: true });} ],
js: [ uglify, rev ],
inlinejs: [ uglify ],
inlinecss: [ cleanCss, 'concat']
}))
.pipe(gulp.dest('build/'));
});var del = require('del');
var vinylPaths = require('vinyl-paths');
gulp.task('clean:tmp', function () {
return gulp.src('tmp/*')
.pipe(vinylPaths(del))
.pipe(stripDebug())
.pipe(gulp.dest('dist'));
});var browserSync = require('browser-sync').create();
gulp.task('serve', function () {
// Serve files from the root of this project
browserSync.init({
files: "**",
port:"1688",
server: {
baseDir: "./src",
}
});
gulp.watch("dist/**").on("change", browserSync.reload);
});gulp.task('html', function() {
return gulp.src('src/*.html')
.pipe(htmlmin({collapseWhitespace: true}))
.pipe(gulp.dest('dist'));
});gulp.task('sass', function () {
return gulp.src('./sass/**/*.scss')
.pipe(sass.sync().on('error', sass.logError))
.pipe(gulp.dest('./css'));
});
gulp.src('./less/**/*.less')
.pipe(sourcemaps.init())
.pipe(less())
.pipe(sourcemaps.write())
.pipe(gulp.dest('./public/css'));gulp.task('minify-css', function() {
return gulp.src('./src/*.css')
.pipe(sourcemaps.init())
.pipe(cleanCSS())
.pipe(sourcemaps.write())
.pipe(gulp.dest('dist'));
});gulp.task('default', () =>
gulp.src('src/**/*.css')
.pipe(sourcemaps.init())
.pipe(autoprefixer())
.pipe(concat('all.css'))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('dist'))
);gulp.task('default', () => {
return gulp.src('src/**/*.js')
.pipe(sourcemaps.init())
.pipe(babel({
presets: ['es2015']
}))
.pipe(concat('all.js'))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('dist'));
});gulp.task('uglify', function (cb) {
pump([
gulp.src('lib/*.js'),
uglify(),
gulp.dest('dist')
],
cb
);
});gulp.task('lint', function() {
return gulp.src('./lib/*.js')
.pipe(jshint())
.pipe(jshint.reporter('YOUR_REPORTER_HERE'));
});gulp.task('default', () =>
gulp.src('src/images/*')
.pipe(imagemin([
imagemin.gifsicle({interlaced: true}),
imagemin.jpegtran({progressive: true}),
imagemin.optipng({optimizationLevel: 5}),
imagemin.svgo({plugins: [{removeViewBox: true}]})
]))
.pipe(gulp.dest('dist/images'))
);
//gifsicle — Compress GIF images
//jpegtran — Compress JPEG images
//optipng — Compress PNG images
//svgo — Compress SVG imagesnpm init
npm install -g gulpnpm install gulp gulp-load-plugins gulp-minify-html gulp-usemin gulp-dev gulp-less gulp-clean-css gulp-autoprefixer gulp-uglify gulp-babel babel-preset-es2015 gulp-jshint gulp-imagemin gulp-rename gulp-concat gulp-clean gulp-sourcemaps browser-sync -D"devDependencies": {
"babel-preset-es2015": "^6.24.1",
"browser-sync": "^2.18.11",
"gulp": "^3.9.1",
"gulp-autoprefixer": "^4.0.0",
"gulp-babel": "^6.1.2",
"gulp-clean": "^0.3.2",
"gulp-clean-css": "^3.3.1",
"gulp-concat": "^2.6.1",
"gulp-dev": "^0.3.0",
"gulp-imagemin": "^3.2.0",
"gulp-jshint": "^2.0.4",
"gulp-less": "^3.3.0",
"gulp-load-plugins": "^1.5.0",
"gulp-minify-html": "^1.0.6",
"gulp-rename": "^1.2.2",
"gulp-sourcemaps": "^2.6.0",
"gulp-uglify": "^2.1.2",
"gulp-usemin": "^0.3.28",
"jshint": "^2.9.4"
}