# gulp-project

**Repository Path**: janmi/gulp-project

## Basic Information

- **Project Name**: gulp-project
- **Description**: 使用gulp构建自动化项目
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2015-07-04
- **Last Updated**: 2021-11-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

使用gulp构建前端自动化项目
=====================
---------------------

###version: 0.0.1

###常用操作命令

-v : 查看已经安装插件的版本,安装到全局的插件才可以通过此命令查看
    例：node -v

cd ：打开目录

cd.. ：返回上一级目录

ls ：查看当前目录列表

mkdir : 新建文件夹

npm init：初始化项目，生成package.json文件，初始化项目需要有些信息需要填写，不清楚可不填，直接回车，后期在补充即可

```
{
  "name": "",
  "version": "0.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "MIT"
}

```

npm install： 自动下载package.jsonz中devDependencies配置安装所有的依赖插件

npm root：查看当前包的安装路径

npm root -g： 查看全局的包的安装路径

npm help：  帮助，如果要单独查看install命令的帮助，可以使用的npm help install

npm install -g 插件名称：全局安装插件
    例： npm install -g grunt-cli

npm install 插件名称 --save-dev ：安装插件到对应的目录中
    例：npm iastall grunt-contrib-watch --save-dev

npm uninstall 插件名称 ：卸载插件
任务名称 ：启动配置的任务
    例：grunt less

ctrl+C ：结束正在运行任务，修改了gulpfile.js，需要重新启动任务



###约定

```
└── src/
│
└── dist/
```

此项目的自动化构建遵循 发布/源码 (dist/src)目录规则
src目录下的文件最终会打包发不到dist目录下
```
└── src/
    ├── project/
        ├── less(sass)/   *.less或sass 文件
        ├── css/     *.css  文件
        ├── js/      *.js 文件
        ├── fonts/   *字体文件
        └── img/     *图片
    ├── project2/    
│
└── dist/
    ├── project/
        ├── css/     *.css  压缩文件
        ├── js/      *.js 压缩文件
        ├── fonts/   *压缩字体文件
        └── img/     *压缩图片
    ├── project2/    
```

###构建工具

```    
gulp
gulp-less
gulp-jshint
gulp-uglify
gulp-autoprefixer
gulp-plumber
browser-sync
gulp-changed
gulp-imagemin
imagemin-pngquant
gulp-cache
gulp-minify-css
gulp-make-css-url-version

```
###构建思路

工具是开发中的一大利器，如果运用的合理可以很大提高效率，但是以上所罗列的工具并不都是我们在开发中所需要的的工具；
在开发中我们实际上只需要编译less或sass、添加浏览器前缀、自动刷新浏览器、语法检测等；
开发完成之后我们就需要对代码进行打包、压缩、添加版本号、合并等，然后发布到dist目录。

所以可以将gulp任务分为两类：开发任务、发布任务。

###构建任务

明确的构建的思路和任务之后，就需要根据相应的插件来构建开发任务了。

####开发任务

基础目录设置
```
    var gulp = require('gulp');
    var SRC = 'src/';
    var DEST = 'dist/';
    var project = ['project','project2','project3'];

```
开发任务编写
```
    var less = require('gulp-less'); 
    var plumber = require('gulp-plumber');

    gulp.task('less', function(){
        for (var i = 0; i < project.length; i++) {
            var path = SRC+project[i];
            gulp.src(path+'/less/**/*.less', {base:path+'/less'})
                .pipe(plumber())    
                .pipe(less())   
                .pipe(autoprefixer('last 2 versions'))
                .pipe(changed(path+'/css')) 
                .pipe(gulp.dest(path+'/css'))
                .pipe(browserSync.stream());
        };
    });


    gulp.task('watch', function(){
        for (var i = 0; i < project.length; i++) {
            var path = SRC+project[i]+"/less/*.less";
            gulp.watch(path,['less']);
        };
    });

    gulp.task('server', ['less'], function(){
        browserSync.init({
            files: 'src/**/*.*',
            server: {
                baseDir: '.'
            }
        });
        for (var i = 0; i < project.length; i++) {
            var path = SRC+project[i]+"/less/*.less";
            gulp.watch(path,['less']);
            gulp.watch('*.html').on('change', browserSync.reload);
        };
    });
```
plumber() : 为了防止在编译less的过程中报错而停止运行任务

less() : 编译less

autoprefixer('last 2 versions') : 自动添加浏览器前缀，默认是以最新浏览器的两个版本来处理前缀。当浏览器足够支持css3属性的时候，就可以去掉这个功能了，又省了一推代码！呼呼！！

changed(path+'/css') ：执行less编译会把目录中的所有less都编译一次，比较耗性能，changed只针对修改过的文件执行任务

在控制台直接运行 gulp server；wtach中已经监听了less、css、js、html文件，只要有任何一个文件被修改了，browserSync就会自动刷新浏览器，还可以同时打开多个浏览器和手机浏览器进行开发，在也不用按F5了！！！


####发布任务
    
压缩css

```
    gulp.task('mincss', function(){
        for (var i = 0; i < project.length; i++) {
            var path = SRC+project[i];
            var destPath = DEST+project[i];
            gulp.src(path+'/css/**/*.css')
                .pipe(cssver())
                .pipe(css({compatibility:'ie7'}))
                .pipe(gulp.dest(destPath+'/css'));
        };
    });

```
cssver() : 给css文件中引用的图片和字体添加版本号，根据引用文件的md5生产版本号

compatibility:'ie7' ：[启用兼容模式； 'ie7'：IE7兼容模式，'ie8'：IE8兼容模式]


压缩图片
```
    gulp.task('minimg',function(){
        for (var i = 0; i < project.length; i++) {
            var path = SRC+project[i];
            var destPath = DEST+project[i];
            gulp.src(path+'/img/**/*.{png,jpg,gif}')
                .pipe(cache(imgmin({use:[pngmin()]})))
                .pipe(gulp.dest(destPath+'/img'));
            gulp.src(path+'/font/**/*.{eot,svg,ttf,woff}')
                .pipe(cache(imgmin({use:[pngmin()]})))
                .pipe(gulp.dest(destPath+'/font'));
        };
    });
```

imgmin不能对png图片进行深度的压缩，所以需要组合pngmin来对png图片进行深度的压缩

cache用于记录图片的缓存，防止图片被多次压缩而造成图片失真，第一次压缩的时间会稍微有点久，一旦cache记录了缓存，只会压缩新添加的图片，效率就会高很多。



压缩js
```
gulp.task('minjs',function(){
        for (var i = 0; i < project.length; i++) {
            var path = SRC+project[i];
            var destPath = DEST+project[i];
            gulp.src(path+'/js/**/*.js')
                .pipe(uglify({mangle:false}))
                .pipe(gulp.dest(destPath+'/js'));
        };
    });

```
mangle:false 如果有使用requireJs或者seajs，请配置此项为fales，否则js中的关键字require会被简写。