gulp打包压缩代码以及图片

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 方法  就行