首先确保你已经正确安装了nodejs环境。
1、新建一个空的项目根目录
2、在根目录下创建package.json,根据项目需要,自定义配置好package.json
{
"private": "true",
"engines": {
"node": ">=0.10.0",
"npm": ">=2.5.0"
},
"dependencies": {
"amd-optimize": "^0.6.1",
"bootstrap": "3.3.4",
"jquery": "2.1.3"
},
"devDependencies": {
"browser-sync": "^2.5.3",
"del": "^1.1.1",
"gulp": "^3.8.11",
"gulp-autoprefixer": "^2.1.0",
"gulp-cache": "^0.2.8",
"gulp-changed": "^1.3.2",
"gulp-jscs": "^4.0.0",
"gulp-cloudfront": "^0.0.14",
"gulp-concat": "^2.5.2",
"gulp-jshint": "^2.0.4",
"gulp-clean-css": "^3.4.2",
"gulp-clean": "^0.3.2",
"gulp-csscomb": "^3.0.3",
"gulp-cssmin": "^0.1.6",
"gulp-data": "^1.2.1",
"gulp-ejs": "^2.3.0",
"gulp-gh-pages": "^0.5.0",
"gulp-htmlmin": "^1.1.1",
"gulp-if": "^1.2.5",
"gulp-imagemin": "^2.2.1",
"gulp-jade": "^1.0.0",
"gulp-less": "^3.0.2",
"gulp-watch": "^4.3.11",
"gulp-load-plugins": "^0.9.0",
"gulp-notify": "^2.2.0",
"gulp-plumber": "^1.1.0",
"gulp-rename": "^1.2.2",
"gulp-cssnano": "^2.1.2",
"gulp-replace": "^0.5.3",
"gulp-sourcemaps": "^1.5.1",
"gulp-uglify": "^1.1.0",
"gulp-css-spriter": "^0.4.0",
"gulp-util": "^3.0.4",
"http-proxy-middleware": "^0.17.3",
"merge-stream": "^0.1.7",
"minimist": "^1.1.1",
"mockjs": "^1.0.1-beta3",
"psi": "^1.0.6",
"run-sequence": "^1.0.2"
},
"name": "exit",
"version": "1.0.0",
"main": "gulpfile.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"description": ""
}
3、项目根目录下安装gulp
- 全局方式安装gulp:
npm install -g gulp
- 全局安装gulp后,还需要在每个要使用gulp的项目中都单独安装一次。把目录切换到你的项目文件夹中,然后在命令行中执行:
npm install gulp
- 如果想在安装的时候把gulp写进项目package.json文件的依赖中,则可以加上–save-dev:
npm install gulp --save-dev
完成后会生成node_modules文件夹。
4、开始使用gulp
目录结构:
/**
* Created by hh.todd@qq.com on 2017/6/21.
*/
var gulp = require('gulp'),
plugins = require("gulp-load-plugins")({
pattern: '*' //让gulp-load-plugins插件能匹配除了gulp插件之外的其他插件
}),
path = {
html: 'html/**/*.html',
htmlDir: 'dest/',
css: 'css/*.css',
cssDir: 'dest/css',
less: 'less/*.less',
js: 'js/**/*.js',
jsDir: 'dest/js',
images: 'images/*.+(jpg|png|gif|svg)',
imagesDir: 'dest/images'
};
//压缩css,压缩后的文件放入dest/css
gulp.task('minifycss', function () {
return gulp.src(path.css)
.pipe(plugins.cssmin()) //压缩
.pipe(gulp.dest(path.cssDir));//输出
});
//合并并压缩css,合并压缩后的文件放入dest/css
gulp.task('concatminifycss', function () {
return gulp.src(path.css)
.pipe(plugins.concat('main.css')) //合并所有css到main.css
//.pipe(gulp.dest(path.cssDir)) //输出main.css到文件夹
//.pipe(plugins.rename({suffix: '.min'})) //rename压缩后的文件名
.pipe(plugins.cssmin())//压缩
.pipe(gulp.dest(path.cssDir));//输出
});
//压缩js,压缩后的文件放入dest/js
gulp.task('minifyjs', function () {
return gulp.src(path.js)
.pipe(plugins.uglify())//压缩
.pipe(gulp.dest(path.jsDir));//输出
});
//合并并压缩js,合并压缩后的文件放入dest/js
gulp.task('concatminifyjs', function () {
return gulp.src(path.js)
.pipe(plugins.concat('main.js')) //合并所有js到main.js
.pipe(gulp.dest(path.jsDir)) //输出main.js到文件夹
.pipe(plugins.rename({suffix: '.min'})) //rename压缩后的文件名
.pipe(plugins.uglify())//压缩
.pipe(gulp.dest(path.jsDir));//输出
});
//合并并压缩html,合并压缩后的文件放入dest/
gulp.task('html', function () {
gulp.src(path.html)
.pipe(plugins.replace('__VERSION', Date.now().toString(16)))
.pipe(plugins.htmlmin({
removeComments: true,//清除HTML注释
collapseWhitespace: true,//压缩HTML
collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input />
removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />
removeScriptTypeAttributes: true,//删除<script>的type="text/javascript"
removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
minifyJS: true,//压缩页面JS
minifyCSS: true//压缩页面CSS
}))
.pipe(gulp.dest(path.htmlDir))
.pipe(plugins.browserSync.stream());
});
//压缩图片,压缩后的文件放入dest/images
gulp.task('image', function () {
gulp.src(path.images)
.pipe(plugins.imagemin({
optimizationLevel: 5, //类型:Number 默认:3 取值范围:0-7(优化等级)
progressive: true, //类型:Boolean 默认:false 无损压缩jpg图片
interlaced: true, //类型:Boolean 默认:false 隔行扫描gif进行渲染
multipass: true //类型:Boolean 默认:false 多次优化svg直到完全优化
}))
.pipe(gulp.dest(path.imagesDir));//输出
});
//执行压缩前,先删除dest文件夹里的内容
gulp.task('clean', function (cb) {
plugins.del(['dest/*'], cb)
});
//编译less到css
gulp.task("less", function () {
gulp.src(path.less)
.pipe(plugins.less())
.pipe(gulp.dest(path.cssDir));
});
//监视文件的变化
gulp.task("watch", function () {
gulp.watch(path.less, ['less']);
gulp.watch(path.css, ['concatminifycss']);
gulp.watch(path.html, ['html']);
gulp.watch(path.js, ['minifyjs']);
gulp.watch(path.images, ['image']);
});
gulp.task("build", ["clean"], function (cb) {
plugins.runSequence(['concatminifycss', 'image', 'less', 'minifyjs', 'html', "watch"], cb);
});
//同步刷新
gulp.task("serve", ["build"], function () {
plugins.browserSync({
//files: '/build/**', //监听整个项目
open: 'local', // 'external' 打开外部URL, 'local' 打开本地主机URL
// https: true,
port: 80,
online: false,
notify: false,
logLevel: "info",
logPrefix: "test",
logConnections: true, //日志中记录连接
logFileChanges: true, //日志信息有关更改的文件
scrollProportionally: false, //视口同步到顶部位置
ghostMode: {
clicks: false,
forms: false,
scroll: false
},
server: {
baseDir: './dest'
//middleware: middleware
}
});
});
//默认命令,在cmd中输入gulp后,执行的就是这个命令
gulp.task('default', ['serve']);
参考博客:
http://www.mamicode.com/info-detail-1221706.html
http://www.cnblogs.com/2050/p/4198792.html