由于npm是国外的服务器，速度比较慢，所以我们使用淘宝镜像进行下载。
npm install -g cnpm --registry=https://registry.npm.taobao.org
常用插件#
var gulp = require('gulp'); //gulp
var $ = require('gulp-load-plugins')();//一个查件集合
var browserSync = require('browser-sync').create(); //热加载
var reload = browserSync.reload;
var concat = require('gulp-concat'); // 合并
var uglify = require('gulp-uglify'); //js压缩
var cssmin = require('gulp-minify-css');//css压缩
var rename = require('gulp-rename');//重命名
var less = require('gulp-less'); //less转css
var sass = require('gulp-sass'); // sass -> css
var prefixer = require('gulp-autoprefixer'); // 增加前缀
var notify = require('gulp-notify'); // 打印提醒语句
1.复制文件##
gulp.task('copy-html',function(){
return gulp.src('./index.html').pipe(gulp.dest('dist'));
});
2.js,css合并文件##
//需要插件
var concat = require('gulp-concat');
//js合并
gulp.task('concatjs',function(){
return gulp.src(["./js/*.js"])//指定要合并的文件glob
.pipe($.concat('app.js'))//进行合并并指定合并后的文件名
.pipe(gulp.dest('dist/js'));//输出到目标路径
});
//css合并
gulp.task('concatcss',function(){
gulp.src('./css/*.css')
.pipe(concat('index.css'))
.pipe(gulp.dest('./dest/css'));
})
3.js,css改变名字##
//需要插件
var rename = require('gulp-rename');
//css换名
gulp.task('renamecss',function(){
gulp.src('./css/*.css')
.pipe(concat('index.css'))
//.pipe(rename({suffix: '.min'})) 与下句话一个意思
.pipe(rename('index.min.css'))
.pipe(gulp.dest('./dest/css'));
})
//js换名
gulp.task('renamejs',function(){
gulp.src('./js/*.js')
.pipe(concat('index.js'))
//.pipe(rename({suffix: '.min'})) 与下句话一个意思
.pipe(rename('index.min.js'))
.pipe(gulp.dest('./dest/js'));
})
4.js,css压缩文件##
//需要插件
var uglify = require('gulp-uglify');
var cssmin = require('gulp-minify-css');
//css压缩
gulp.task('mincss', function () {
gulp.src('src/css/*.css')
.pipe(cssmin())
.pipe(gulp.dest('dist/css'));
});
//js压缩
gulp.task('minjs',function(){
gulp.src('./js/*.js')
.pipe(concat('inddasex1.js'))
.pipe(gulp.dest('./dest/js'))
.pipe(rename({suffix: '.min'}))
.pipe(uglify())
.pipe(gulp.dest('./dest/js'));
})
4.less转css
//需要查件
var gulp = require('gulp'),
less = require('gulp-less');
gulp.task('testLess', function () {
gulp.src('src/less/index.less')
.pipe(less())
.pipe(gulp.dest('src/css'));
});
5.sass转css
var gulp = require('gulp');
var sass = require('gulp-sass'); // sass -> css
var prefixer = require('gulp-autoprefixer'); // 增加前缀
var minify = require('gulp-minify-css'); // css 压缩
var notify = require('gulp-notify'); // 打印提醒语句
var concat = require('gulp-concat'); // 合并
// 编译Sass
gulp.task('css', function() { // 任务名
gulp.src('sass/*.scss') // 目标 sass 文件
.pipe(sass()) // sass -> css
.pipe(minify()) // 压缩
.pipe(gulp.dest('css')) // 目标目录
.pipe(notify({message: 'done'}))
.pipe(concat('all.min.css')) // 合并
.pipe(gulp.dest('css')); // 目标目录
});
7.热加载（browser-sync）
var browserSync = require('browser-sync').create();
var reload = browserSync.reload;
gulp.task('serve', function() {
browserSync.init({
server: "./"
});
gulp.watch("./js/*.js").on('change', reload);
gulp.watch("*.html").on('change', reload);
});
