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