1、首先全局安装gulp
全局安装就不做介绍了
初学gulp，终于把常用的配置，api,语法弄明白了！
gulp插件地址：http://gulpjs.com/plugins
gulp官方网址：http://gulpjs.com
gulp 官方API：https://github.com/gulpjs/gulp/blob/master/docs/API.md
项目的目录结构应该是
D:.
└─文件名
├─src
│ ├─css
│ ├─fonts
│ ├─images
│ └─js
└─dist
├─css
├─fonts
├─images
└─js
gulpfile.js
package.json
src是
2、新建一个package.json
npm init
命令行中会出现
Press ^C at any time to quit.
name: (a1)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
填各种信息，填完出现下面
{
"name": "a1",//项目名称（必填）
"version": "1.0.0",//项目版本（必填）
"description": "a test",//项目描述（必填）
"main": "gulpfile.js",//入口文件
"test command" //测试命令
"git repository" //git 地址
"keywords" //关键字
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",//作者
"license": "ISC" //许可信息
}
Is this ok? (yes)
为了能正常使用，我们还得本地安装gulp：
npm install gulp --save-dev；
全局安装gulp是为了执行gulp任务，本地安装gulp则是为了调用gulp插件的功能。
之后就是需要什么就安装什么插件了
npm install gulp-htmlmin gulp-imagemin imagemin-pngcrush gulp-minify-css gulp-uglify gulp-concat gulp-rename gulp-notify --save-dev
安装js校验插件
npm install --save-dev jshint gulp-jshint
–save：将保存配置信息至package.json
-dev：保存至package.json的devDependencies节点，不指定-dev将保存至dependencies节点；
3、创建gulpfile.js文件
vim gulpfile.js
输入代码
// 引入 gulp及组件
//插件的引入方法 和任务建立方法参照gulp的官网插件
var gulp = require('gulp'),
autoprefixer = require('gulp-autoprefixer'),
minifycss = require('gulp-minify-css'), //压缩css
jshint = require('gulp-jshint'), //js代码校验
uglify = require('gulp-uglify'), //压缩JS
imagemin = require('gulp-imagemin'), //压缩图片
rename = require('gulp-rename'), //合并js文件
concat = require('gulp-concat'),
notify = require('gulp-notify'),
cache = require('gulp-cache'),
livereload = require('gulp-livereload'),
del = require('del');
htmlmin = require('gulp-htmlmin');//压缩html代码
//建立任务： Styles
gulp.task('styles', function() {
return gulp.src('src/styles/*.css')
.pipe(rename({
suffix: '.min'
}))
.pipe(minifycss())
.pipe(gulp.dest('dist/styles'))
.pipe(notify({
message: 'Styles task complete'
}));
});
//建立任务： htmlmin
gulp.task('htmlmin', function() {
// src/**/*.html 这个代表的是src下边的html文件以及他的子文件下的所有的html文件
return gulp.src('src/*.html')
.pipe(rename({
suffix: 'min'
}))
.pipe(htmlmin({collapseWhitespace: true}))
.pipe(gulp.dest('dist'))
.pipe(notify({
message: ' task complete'
}));
});
// Scripts
gulp.task('scripts', function() {
return gulp.src('src/scripts/**/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'))
.pipe(concat('main.js'))
.pipe(rename({
suffix: '.min'
}))
.pipe(uglify())
.pipe(gulp.dest('dist/scripts'))
.pipe(notify({
message: 'Scripts task complete'
}));
});
// Images
gulp.task('images', function() {
return gulp.src('src/images/**/*')
.pipe(cache(imagemin({
optimizationLevel: 3,
progressive: true,
interlaced: true
})))
.pipe(gulp.dest('dist/images'))
.pipe(notify({
message: 'Images task complete'
}));
});
// Clean 任务执行前，先清除之前生成的文件
gulp.task('clean', function(cb) {
del(['dist/assets/css', 'dist/assets/js', 'dist/assets/img'], cb)
});
// Default task 设置默认任务
gulp.task('default', ['clean'], function() {
gulp.start('styles', 'scripts', 'images');
});
// 监听文件: Watch
gulp.task('watch', function() {
// Watch .scss files
gulp.watch('src/styles/**/*.css', ['styles']);
// Watch .js files
gulp.watch('src/scripts/**/*.js', ['scripts']);
// Watch image files
gulp.watch('src/images/**/*', ['images']);
// Create LiveReload server
livereload.listen();
// Watch any files in dist/, reload on change
gulp.watch(['dist/**']).on('change', livereload.changed);
});
4、查看js 和 json 文件
json 文件现在应该是
{
"name": "gulp-learn",
"version": "1.0.0",
"description": "",
"main": "gulpfile.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "haonan",
"license": "ISC",
"devDependencies": {
"gulp": "^3.9.1",
"gulp-clean-css": "^3.0.2",
"gulp-concat": "^2.6.1",
"gulp-htmlmin": "^3.0.0",
"gulp-imagemin": "^3.1.1",
"gulp-jshint": "^2.0.4",
"gulp-minify-css": "^1.2.4",
"gulp-notify": "^3.0.0",
"gulp-rename": "^1.2.2",
"gulp-uglify": "^2.0.1",
"imagemin-pngcrush": "^5.0.0",
"jshint": "^2.9.4"
"package.json" 25L, 594C
5、开始运行压缩
js文件中的
gulp.task('images', function() {
task也就是任务后边的 '' 里面是什么就代表是什么方法，在终端运行
gulp 方法 就行