gulp検証パッケージ圧縮暗号化コンパイル(共通)

目次
プロジェクトのレイアウト
2.1基本使用(task)
2.2メソッド呼び出し
パッケージアイテム
JSの検証
jsファイル圧縮
CSSにコンパイル(LESSまたはSASS)する
cssの検証
npmの初期化およびgulpのインストール手順を省略

プロジェクトのレイアウト

1.プロジェクトの下にgulpfileを新規作成する.jsファイル2.gulpfileの編集を開始します.js

2.1基本使用（task）

//    
var gulp=require("gulp");



//gulp.task        ，      Orchestrator，    ：
//gulp.task(name[, deps], fn)
//name:     
//deps:                  ，     。                          。      ，        
//fn:      ，                ，            。        。

//   java  main  (     )
gulp.task("default",function(){
	console.log("this is default.js")
})

// java  ,   default  
gulp.task("compresJS",function(){
	console.log("this is compresJS.js")
})

2.2メソッド呼び出し

//    
var gulp=require("gulp");

//gulp.task        ，      Orchestrator，    ：
//gulp.task(name[, deps], fn)
//name:     
//deps:                  ，     。                          。      ，        
//fn:      ，                ，            。        。

//   java  main  (     ), deps[]           
//              default    :
//     
//console.log("this is compresJS.js")
//   
//console.log("this is compresCss.js")
//   
//console.log("this is default.js")

//               ,    compresJS   compresCss 
gulp.task("default",["compresJS","compresCss"],function(){
	console.log("this is default.js")
})


gulp.task("compresJS",["compresCss"],function(){
	console.log("this is compresJS.js")
})

gulp.task("compresCss",function(){
	console.log("this is compresCss.js")
})

パッケージアイテム

1.先にプラグインをインストールする:npm install gulp-concat--save-dev 2.gulpfileを編集する.js

//    : require               ,  node_modules   
var gulp=require("gulp");
//      
var concat=require("gulp-concat");

//gulp.task        ，      Orchestrator，    ：
//gulp.task(name[, deps], fn)
//name:     
//deps:                  ，     。                          。      ，        
//fn:      ，                ，            。        。

//   java  main  (     ), deps[]           
gulp.task("default",["compresJS"],function(){
	console.log("this is default.js")
})

//  js  
gulp.task("compresJS",["compresCss"],function(){
	//scr：    js                                                
	gulp.src(["./script/**/*.js"]).pipe(concat("sumjs.js")).pipe(gulp.dest("./script"))
})

gulp.task("compresCss",function(){
	console.log("this is compresCss.js")
})

JSの検証

1.プラグインもインストールする:npm install jshint gulp-jshint--save-dev 2.それともgulpfileを編集しますか?js  

//    : require               ,  node_modules   
var gulp=require("gulp");
//      
var concat=require("gulp-concat");
//    js  
var hint=require("gulp-jshint");

//gulp.task        ，      Orchestrator，    ：
//gulp.task(name[, deps], fn)
//name:     
//deps:                  ，     。                          。      ，        
//fn:      ，                ，            。        。

//   java  main  (     ), deps[]           
gulp.task("default",["compresJS"],function(){
	console.log("this is default.js")
})

//  js  ,  ：         ，              
gulp.task("compresJS",["compresCss"],function(){
	//scr：    js   
	gulp.src(["./script/**/*.js"]).
	//   
	pipe(hint()).
	//      
	pipe(hint.reporter("default")).
	//        
	pipe(hint.reporter("fail")).
	//       
	pipe(concat("sumjs.js")).
	//          
	pipe(gulp.dest("./script"))
})

gulp.task("compresCss",function(){
	console.log("this is compresCss.js")
})

jsファイル圧縮

1.プラグインのインストールを続行:npm install--save-dev gulp-uglify 2.それともgulpfileを編集しますか?js

//    : require               ,  node_modules   
var gulp=require("gulp");
//      
var concat=require("gulp-concat");
//    js  
var hint=require("gulp-jshint");
//  js    
var uglify=require("gulp-uglify");

//gulp.task        ，      Orchestrator，    ：
//gulp.task(name[, deps], fn)
//name:     
//deps:                  ，     。                          。      ，        
//fn:      ，                ，            。        。

//   java  main  (     ), deps[]           
gulp.task("default",["compresJS"],function(){
	console.log("this is default.js")
})

//  js  ,  ：
//1.   
//2.  
//3.  
gulp.task("compresJS",["compresCss"],function(){
	//scr：    js   
	gulp.src(["./script/**/*.js"]).
	//   
	pipe(hint()).
	//      
	pipe(hint.reporter("default")).
	//        
	pipe(hint.reporter("fail")).
	//  
	pipe(uglify()).
	//       
	pipe(concat("sumjs.js")).
	//          
	pipe(gulp.dest("./script"))
})

gulp.task("compresCss",function(){
	console.log("this is compresCss.js")
})

CSSにコンパイル(LESSまたはSASS)する

SASS版1.プラグインnpm install--save-dev gulp-sass 2のインストールを続行します.gulpfileを編集する.js  

//    : require               ,  node_modules   
var gulp=require("gulp");
//      
var concat=require("gulp-concat");
//    sass  
var sass=require("gulp-sass");


//gulp.task        ，      Orchestrator，    ：
//gulp.task(name[, deps], fn)
//name:     
//deps:                  ，     。                          。      ，        
//fn:      ，                ，            。        。

//   java  main  (     ), deps[]           
gulp.task("default",["compresCss"],function(){
	console.log("  compressCss  Default ")
	console.log("this is default.js")
})

//  SASS  
gulp.task("compresCss",function(){
	//          scss  
	return gulp.src("./script/**/*.scss").
	//    
	pipe(sass()).
	//       
	pipe(concat("bianyicss.css")).
	//             (  )
	pipe(gulp.dest("./script"))
})

cssの検証

1.プラグインのインストールを続行:npm install--save-dev gulp-minify-css 2.gulpfileの変更を続行します.js  

//    : require               ,  node_modules   
var gulp=require("gulp");
//      
var concat=require("gulp-concat");
//    sass  
var sass=require("gulp-sass");
//    css  
var minify=require("gulp-minify-css");


//gulp.task        ，      Orchestrator，    ：
//gulp.task(name[, deps], fn)
//name:     
//deps:                  ，     。                          。      ，        
//fn:      ，                ，            。        。

//   java  main  (     ), deps[]           
gulp.task("default",["compresCss"],function(){
	console.log("  compressCss  Default ")
	console.log("this is default.js")
})

//  SASS  
gulp.task("compresCss",function(){
	//          scss  
	return gulp.src("./script/**/*.scss").
	//   
	pipe(minify()).
	//    
	pipe(sass()).
	//       
	pipe(concat("bianyicss.css")).
	//             (  )
	pipe(gulp.dest("./script"))
})