gulp 安装:
(1): npm install gulp -g [全局安装]
(2): npm install gulp --save-dev [安装依赖]
(3): npm install gulp-sass --save-dev [sass插件]
(4): npm install gulp-connect --save-dev [插件搭建本地服务]
(5): npm install gulp-concat --save-dev [合并插件]
(6): npm install gulp-uglify --save-dev [合并js文件进行压缩]
(7): npm install gulp-rename --save-dev [保留前后压缩两个文件]
(8): [npm install gulp-sass --save-dev] npm install gulp-clean-css --save-dev [压缩css]
(9): npm install gulp-imagemin --save-dev [对图片进行压缩]
(10):npm install gulp-sourcemaps --save-dev
(11):npm install babel-cli --save-dev
npm install babel-preset-es2015 --save-dev
npm install gulp-babel --save-dev [es6转换es5]
gulpfile.js配置文件
执行gulp命令,直接输入gulp回车
const gulp=require("gulp");
//引入gulp
const sass=require("gulp-sass");
//引入编译sass
const connect=requeire("gulp-connect");
//搭建本地服务器
const concat=requeire("gulp-concat");
//合并文件
const uglify=requeire("gulp-uglify");
//压缩js文件
const rename=requeire("gulp-rename");
//重命名
const cleanCss=requeire("gulp-clean-css");
//压缩css文件
const imagemin=requeire("gulp-imagemin");
//压缩图片
const babel=requeire("gulp-babel");
//es6转es5环境
/*task创建 有两个参数
第一个参数为任务名,第二个参数为任务所要执行的代码
gulp.task("start",function(){
console.log("aaa")
})
从第一个地方复制到另一个地方
gulp.src().pipe(gulp.dest())
默认任务
gulp.task("default",["",""]);
排除文件
gulp.task('data',function(){
return gulp.src([‘xml/*.xml’,‘json/*.json’,'!json/b.json']).pipe(gulp.dest('dist/ data'));
})
多任务执行
gulp.task('build',['copy-index','images','data'],function(){
console.log('编译成功');
})
侦测文件
gulp.task('watch',function(){
gulp.watch('index.html',['copy-index']); gulp.watch('images/**/*.{jpg,png}',['images']); gulp.watch(['xml/*.xml','json/*.json','!json/secret.json'],['data']);
})
搭建本地服务器
gulp.task('sever',function(){
connect.server({root:'dist'});
})
自动刷新
gulp.task('sever',function(){
connect.server();
sever()方法介绍
配置文档根目录
connect.server({
root:‘dist’,
livereload:true
});
})
然后在我们copy任务中添加
gulp.task('copy-index',function(){
return gulp.src('index.html').pipe(gulp.dest(‘dist')).pipe(connect.reload());
})
gulp.task('watch',function(){
gulp.watch('index.html',['copy-index']);
})
然后创建一个
gulp.task('default',['sever','watch']);
最后执行 gulp default命令
重命名
var rename = require('gulp-rename');
gulp.task('scripts',function(){
return gulp.src(['javascripts/avalon.js','javascripts/index.js'])
.pipe(concat('vendor.js'))
.pipe(gulp.dest('dist/js'))
.pipe(uglify())
.pipe(rename('vendor.min.js'))
.pipe(gulp.dest('dist/js'));
})
es6转es5
npm install babel-cli --save-dev npm install babel-preset-es2015 --save-dev
安装插件npm install gulp-babel --save-dev
gulp.task("default", function () {
return gulp.src("app.js")
.pipe(babel({“presets”:[“es2015”]}))
.pipe(gulp.dest("lib"));
});
执行命令 gulp
压缩css
npm install gulp-sass --save-dev
命令行安装 npm install gulp-clean-css --save-dev
var cleanCss = require('gulp-clean-css');
gulp.task(‘sass',function(){
return gulp.src('stylesheet/**.sass')
.pipe(sass())
.pipe(cleanCss ())
.pipe(gulp.dest('dist/css'));
})
js压缩
在gulpfile.js 中
var uglify = require('gulp-uglify');
gulp.task('scripts',function(){
return gulp.src(['javascripts/avalon.js','javascripts/index.js'])
.pipe(concat('vendor.js'))
.pipe(uglify())
.pipe(gulp.dest('dist/js'));
})
文件合并
在gulpfile.js 中
var concat = require('gulp-concat');
gulp.task('scripts',function(){
return gulp.src(['javascripts/avalon.js','javascripts/index.js'])
.pipe(concat('vendor.js'))
.pipe(gulp.dest('dist/js')); })
sass编译
var sass = require('gulp-sass');
gulp.task('sass',function(){
return gulp.src('stylesheet/**.scss')
.pipe(sass())
.pipe(gulp.dest('dist/css'))
})
*/
//路径指向源文件
var sourcemaps = require('gulp-sourcemaps');
gulp.task('sass', function () {
return gulp.src('./sass/**/*.scss')
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError))
.pipe(sourcemaps.write('./maps'))
.pipe(gulp.dest('./css'));
});