全局安装：npm install --global gulp
项目依赖安装： npm install --save-dev gulp=>出现node_modules
测试安装成功没：gulp -v；成功的话会出现版本号
初始化 npm init =>出现 package.json 文件
在项目文件下建立src 目录，开发使用；立html文件；
在项目文件下建立build目录，（打包。功能包）在着建立css、js文件；
在项目中手动建立gulpfile.js文件，
安装热更新模块：npm i gulp-webserver -D
注意：首页最好使用index.html文件名字,相当于是一个默认名字；
const gulp = require("gulp")
const concat = require('gulp-concat')//合并
const cleanCSS = require('gulp-clean-css');//压缩css
const autoprefixer = require('gulp-autoprefixer');//css兼容
const webserver = require("gulp-webserver")//热更新模块
//热更新服务的任务
gulp.task('server',function () {
gulp.src('./').
pipe(webserver({
host:"localhost",
port:9000,
livereload :true , //是否热更新
directoryListing :true
}))
})
const sass = require('gulp-sass')//处理sass的模块
gulp.task('sass',function () {//编译sass的任务
// setTimeout(function(){
gulp.src('./src/sass/**/*.scss').
pipe(sass({outputStyle:'compressed'}).on('error', sass.logError))
.pipe(concat('index.css'))
// .pipe(cleanCSS({compatibility: 'ie8'}))
.pipe(autoprefixer({
browsers: ['last 2 versions'],
cascade: false
}))
.pipe(gulp.dest("./build/css"))
// },200)
})
//js处理
const webpack = require('gulp-webpack')
const uglify = require('gulp-uglify');
const rename = require('gulp-rename')
gulp.task("packjs",function(){
gulp.src("./src/js/index.js")
.pipe(webpack({
output:{
filename:'index.js'
},
module:{
loaders:[
{
test:/\.js$/,
loader:"babel-loader",
query:{
presets:['es2015']
}
}
]
}
}))
.pipe(uglify())
.pipe(rename({
suffix: ".min"
}))
.pipe(gulp.dest('./build/js'))
})
//监听sass任务
gulp.task('watch:sass',function () {
gulp.watch('./src/sass/**/*.scss',['sass'])
})
//监听js任务
gulp.task('watch:js',function () {
gulp.watch('./src/js/**/*.js',['packjs'])
})
//默认任务
gulp.task('default',['sass','watch:sass','packjs','watch:js','server'])
```
cmd自动更新：gulp +Enter
合并css文件：npm install -D gulp-concat在项目中安装,
注意：合并后的文件按字母顺序排序，所以为了不使排版被覆盖，给scss文件分别添加字母a，b，c.....,让文件按顺序排列，排版就会按照我们所需要的出现。
压缩css：cnpm i gulp-clean-css -D
css兼容处理：
1、codepen.io =>create=>css设置选中AUTOPREFIXER,在下拉菜单中选中view uncompiled None;
2、npmjs.com=>gulp-autoprefixer：
npm install --save-dev gulp-autoprefixer
js模块化编译打包
npm install gulp-webpack -D
用babel编译es6 ，用gulp-rename改名字，用gulp-uglify压缩
网友评论