gulp实践入门

安装nodejs

前面说过，如果是windows需要加入环境变量

使用bat window批量安装

@echo off
cd /d %~dp0
echo "淘宝镜像，加快速度"
call npm install -g cnpm --registry=https://registry.npm.taobao.org
echo "安装全局gulp"
call cnpm install -g  gulp
echo "创建文件package.json"
echo ^{"name": "gulp", "version": "1.0.0", "description": "", "main": "index.js", "scripts": {"test": "echo \"Error: no test specified\" && exit 1"}, "keywords": [], "author": "", "license": "ISC", "devDependencies": {"accord": "^0.30.0", "ansi-cyan": "^0.1.1", "ansi-red": "^0.1.1", "cnpm": "^6.0.0", "core-util-is": "^1.0.2", "gulp": "^3.0.0", "gulp-clean": "^0.4.0", "gulp-clean-css": "^4.0.0", "gulp-concat": "^2.6.1", "gulp-less": "^3.0.1", "gulp-rename": "^1.4.0", "gulp-sass": "^4.0.2", "gulp-sourcemaps": "^2.6.5", "gulp-uglify": "^3.0.2", "install": "^0.12.2", "less": "^3.9.0", "pump": "^3.0.0", "rename": "^1.0.4"} }^ > package.json
echo '执行更新安装操作'
call cnpm install
::目前没搞定如何原样的写入文件
echo "监听脚本";
echo '@echo '>watch.bat
echo 'gulp watch '>>watch.bat
echo ' @pause'>>watch.bat
echo '完成本次操作'
@pause

淘宝镜像，加快速度

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装gulp

cnpm install -g gulp

项目

新建一个gulpdemo目录

mkdir gulpdemo

初始化nodejs配置文件

npm init -y

package.json

{
  "name": "gulp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "accord": "^0.30.0",
    "ansi-cyan": "^0.1.1",
    "ansi-red": "^0.1.1",
    "cnpm": "^6.0.0",
    "core-util-is": "^1.0.2",
    "gulp": "^3.0.0",
    "gulp-clean": "^0.4.0",
    "gulp-clean-css": "^4.0.0",
    "gulp-concat": "^2.6.1",
    "gulp-less": "^3.0.1",
    "gulp-rename": "^1.4.0",
    "gulp-sass": "^4.0.2",
    "gulp-sourcemaps": "^2.6.5",
    "gulp-uglify": "^3.0.2",
    "install": "^0.12.2",
    "less": "^3.9.0",
    "pump": "^3.0.0",
    "rename": "^1.0.4"
  }
}

cnpm install --save-dev gulp gulp-less gulp-rename gulp-concat gulp-clean-css pump gulp-uglify rename gulp-clean  gulp-sass gulp-sourcemaps accord  core-util-is ansi-red ansi-cyan

新建gulp配置文件
gulpfile.js

必备依赖

less
https://www.npmjs.com/package/gulp-less

cnpm install --save-dev gulp-less

exp

var gulp=require('gulp');
var less = require('gulp-less');//引入gulp-less
var path = require('path');//读取node path

gulp.task('less', function () {
  //less目录
  return gulp.src('./less/*.less')
     //使用less插件  
    .pipe(less({
      paths: [ path.join(__dirname, 'less', 'includes') ]
    }))
    //输出目录gulp.dest
    .pipe(gulp.dest('./public/css'));
});
//pipe管道操作

gulp less //less表示刚才定义的第一个名字任务

合并gulp-concat

https://www.npmjs.com/package/gulp-concat

npm install --save-dev gulp-concat

exp

var gulp=require('gulp');
var path = require('path');
var concat = require('gulp-concat');
gulp.task('concatjs', function() {
  return gulp.src('./lib/*.js')
    .pipe(concat('all.js'))
    .pipe(gulp.dest('./dest/js'));
});

gulp concatjs

src表示源，可以使用正则也可以不使用
dest表示目标
调用插件直接使用刚才头部定义的()

压缩css gulp-clean-css

https://www.npmjs.com/package/gulp-clean-css

npm install --save-dev gulp-clean-css

EXP

var gulp=require('gulp');
let cleanCSS = require('gulp-clean-css');
gulp.task('minify-css', () => {
  return gulp.src('css/*.css')
    .pipe(cleanCSS({debug: true}, (details) => {
      console.log(`${details.name}: ${details.stats.originalSize}`);
      console.log(`${details.name}: ${details.stats.minifiedSize}`);
    }))
  .pipe(gulp.dest('dist'));
});

压缩js gulp-uglify

https://www.npmjs.com/package/gulp-uglify

npm install --save-dev pump
npm install --save-dev gulp-uglify

gulp.task('compress', function (cb) {
  pump([
        gulp.src('lib/*.js'),
        uglify(),
        gulp.dest('dist/js')
    ],
    cb
  );
});

简单模式

var gulp=requrie('gulp');
var uglify = require('gulp-uglify');
gulp.task('compress', function (cb) {
  gulp.src('./lib/*.js')
  .pipe(uglify())
  .pipe(gulp.dest('./dest/jsa/'));
});

修改文件名字rename

https://www.npmjs.com/package/gulp-rename

npm install --save-dev rename

exp

var uglify = require('gulp-uglify');
var pump = require('pump');
var rename=require('gulp-rename');

gulp.task('compress', function (cb) {
  gulp.src('./lib/*.js')
  .pipe(uglify())
  .pipe(rename({ suffix: '.min' }))
  .pipe(gulp.dest('./dest/jsa/'));
});

删除文件夹gulp-clean

https://www.npmjs.com/package/gulp-clean

npm install --save-dev gulp-clean

var gulp=requrie('gulp);
var clean = require('gulp-clean');

gulp.task('rmdest', function () {
    return gulp.src('dest/', {read: false})
        .pipe(clean());
});

sass

npm install gulp-sass --save-dev

exp

var gulp=requrie('gulp);
var sass = require('gulp-sass');
gulp.task('sass', function () {
  return gulp.src('./sass/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('./css'));
});

生成map

https://www.npmjs.com/package/gulp-sourcemaps

npm install --save-dev gulp-sourcemaps

gulp.task('javascript', function() {
  gulp.src('lib/*.js')
    .pipe(concat( 'common.js'))
    .pipe(sourcemaps.init())
    .pipe(uglify())
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('dest'));
});

//新建gulpfile.js
现在搞一个，编译less，合并css ，合并js,清空dest文件夹，输出dest目录下

var gulp=require('gulp');
var less = require('gulp-less');
var path = require('path');
var concat = require('gulp-concat');
var cleanCSS = require('gulp-clean-css');
var uglify = require('gulp-uglify');
var pump = require('pump');
var rename=require('gulp-rename');
var sourcemaps = require('gulp-sourcemaps');
var sass = require('gulp-sass');
var clean = require('gulp-clean');
var out_dir='./dest2'
var out_css_dir='./dest2/css';
var out_js_dir='./dest2/js';
gulp.task('cleardir',function(){
  gulp.src(out_dir)
      .pipe(clean());
});
gulp.task('less',function(){
  gulp.src('./less/*.less')
    .pipe(less())
    .pipe(concat( 'style.css'))
    .pipe(gulp.dest(out_css_dir))
    .pipe(rename({ suffix: '.min' }))
    .pipe(cleanCSS({debug: true}, (details) => {
      console.log(`${details.name}: ${details.stats.originalSize}`);
      console.log(`${details.name}: ${details.stats.minifiedSize}`);
    }))
    .pipe(gulp.dest(out_css_dir));
});
gulp.task('sass',function(){
  gulp.src('./sass/*.scss')
    .pipe(sass())
    .pipe(concat( 'sass.css'))
    .pipe(gulp.dest(out_css_dir))
    .pipe(rename({ suffix: '.min' }))
    .pipe(cleanCSS({debug: true}, (details) => {
      console.log(`${details.name}: ${details.stats.originalSize}`);
      console.log(`${details.name}: ${details.stats.minifiedSize}`);
    }))
    .pipe(gulp.dest(out_css_dir));
});
gulp.task('js',function(){
  gulp.src('./lib/*.js')
    .pipe(concat('lib.js'))
    .pipe(gulp.dest(out_js_dir))
    .pipe(rename({ suffix: '.min' }))
    .pipe(sourcemaps.init())
    .pipe(uglify())
    .pipe(sourcemaps.write())
    .pipe(gulp.dest(out_js_dir));
});
//执行多个任务，数组后面的先执行
gulp.task('default',['less','sass','js','cleardir']);

现在执行

gulp

如果不想每次都要输入，你可以设置监听
例如

gulp.task('watch',function(){
    gulp.watch('./less/*.less',['less']);//编写监听less
    gulp.watch('./lib/*.js',['js']);//编写监听js
})

gulp watch

生成地图形式

//less
gulpfile.task('less', function () {
    gulpfile.src('../less/ui.less')
        .pipe(sourcemaps.init())//开始map位置
        .pipe(less())//启动LESS编译
        .pipe(concat('style.css'))//合并成一个文件
        .pipe(sourcemaps.write('./'))//写入MAP文件
        .pipe(gulpfile.dest(out_css_dir))//输出目标

});

压缩less输出

gulp.task('less',function(){
  gulp.src('./less/*.less')
    .pipe(less())
    .pipe(rename({ suffix: '.min' }))
    .pipe(cleanCSS({debug: true}, (details) => {
      console.log(`${details.name}: ${details.stats.originalSize}`);
      console.log(`${details.name}: ${details.stats.minifiedSize}`);
    }))
    .pipe(gulp.dest(out_css_dir));
});

JS

gulp.task('uglify', function () {
    return gulp.src('view/*.js')
        .pipe(sourcemaps.init({loadMaps: true}))
        .pipe(concat('index.min.js'))
        .pipe(uglify())
        .pipe(sourcemaps.write('/'))
        .pipe(gulp.dest('dist/view'));
});