1.安装node.js
2.全局安装gulp.js
npm install gulp -g
3.在项目本地根目录再安装(通过黑窗口安装)npm install --save-dev gulp/ 或者 npm install gulp,
项目本地会自动生成package.json 配置文件
4.在项目根目录创建gulpfile.js文件
5,在gulpfile.js中写
var gulp = require(‘gulp‘); //引入gulp组件
/*引入文件合并插件*/
var concat = require(‘gulp-concat‘);
/*引入文件压缩插件*/
var uglify =require(‘gulp-uglify‘)
//默认任务 可以一次性执行多个任务
gulp.task(‘default‘, function() {
console.log("创建的第一个任务")
});
gulp.task(‘hellow1‘, function() {
console.log("创建的第一个任务")
});
gulp.task(‘hellow2‘, function() {
console.log("创建的第一个任务")
});
gulp.task(‘hellow3‘, function() {
console.log("创建的第一个任务")
});
gulp.task(‘default‘, [‘hellow1‘,‘hellow2‘,‘hellow3‘],function(){
console.log("执行了三个任务")
})
执行 gulp 即可 执行了三个任务
//文件复制粘贴实例
gulp.task(‘copy-files‘, function() {
//去到目标路径下，执行拷贝
//去道对应的路径下，执行粘贴
//src 获得资源
//将文件写入对应的路径
gulp.src([‘js/test.js‘,‘js/test1.js‘])
.pipe(gulp/dest(‘js-finish‘))
.pipe(gulp/dest(‘js-test‘)); //可以多次复制
执行gulp copy-files 即可粘贴到js-finish中
});
//合并
gulp.task(‘concat-js‘,function(){
gulp.src([‘js/*.js‘]) //*表示获得js目录下所有js文件
.pipe(concat(‘index.js‘))
.pipe(gulp.dest(‘dist‘));
})
//执行 gulp concat-js
//压缩
gulp.task(‘uglify-js‘,function(){
gulp.src([‘js/*.js‘]) //*表示获得js目录下所有js文件
.pipe(concat(‘index.js‘))
.pile(uglify()) //压缩
.pipe(gulp.dest(‘index.js‘));
})
//执行 gulp uglify-js 自动压缩并合并到index.js中
例如
//创建任务
gulp.task(‘hello‘,function(){
console.log("创建的第一个任务")
})
//执行gulp hello
输出结果 （ 创建的第一个任务）
实例
//js文件合并
gulp.task(‘concat-js‘,function(){
gulp.src([‘js/flexible_css.debug.js‘,‘js/flexible.debug.js‘,‘js/swiper.min.js‘,‘js/up.js‘])
.pipe(concat(‘index.js‘))
.pipe(gulp.dest(‘dist‘));
})
//css 文件合并
gulp.task(‘concat-css‘,function(){
gulp.src([‘css/common.css‘,‘css/swiper.min.css‘,‘css/index.css‘])
.pipe(concat(‘index.css‘))
.pipe(gulp.dest(‘dist‘));
})
------------------------------------------------------------------------------------------
在项目本地路径下
执行
1.
npm init
安装gulp组件
npm install gulp --save-dev
npm install
安装gulp插件
webserver
npm install gulp-webserver
npm install gulp-uglify //文件压缩
npm install gulp-minify-css //压缩css
npm install gulp-rename //文件重命名
npm install gulp-concat //合并文件