npm
- 官網(wǎng)[https://www.npmjs.com]
- node package manager
- 命令:
- 初始化:
npm init - 安裝指定包:
npm install jquery --save - 刪除指定包:
npm remove jquery --save - 卸載一般用 npm uninstall --save jquery 或者 npm remove --save jquery
- 下載安裝package.json中dependencies屬性對(duì)的文件:
npm install --production
- 初始化:
- npm的使用步驟
- 第一步、npm init創(chuàng)建一個(gè)文件夾（注意：不要用中文名,不能以數(shù)字開頭救赐，不能有空格）
- 第二步涧团、執(zhí)行npm init -y
- 第三步、安裝需要的js庫 npm install --save jquery
browser-sync
- 更改代碼之后自動(dòng)刷新瀏覽器
- 需要使用npm進(jìn)行全局安裝:
npm install browser-sync -g,-g表示安裝到全局 - 使用:
browser-sync start --server --files "./index.html,app.css,./css/*.css,*.*" - --files參數(shù)指定要監(jiān)視的文件经磅，后面跟要監(jiān)視的文件的文件路徑以逗號(hào)分隔泌绣。
gulp
前端自動(dòng)化構(gòu)建工具
js壓縮,var x,xname，混淆
合并.
css壓縮
html壓壓縮grunt ,webpack...
核心就5個(gè)方法
- task,gulp中是一個(gè)個(gè)任務(wù)的形式來實(shí)現(xiàn)功能预厌。
- task('任務(wù)名',function(){
.....
});
- task('任務(wù)名',function(){
- src
- src('./*.js')
- dest('./minjs/')// 指定處理后的文件的輸出路徑.
- watch('./*.js',['任務(wù)名1','任務(wù)名2']);
- run('任務(wù)名');//執(zhí)行指定的任務(wù).
gulp的安裝
- 使用npm 進(jìn)行安裝
-
npm install gulp-cli -g;
gulp 使用
使用時(shí)還需要在項(xiàng)目中通過npm非全局安裝gulp
-
npm install gulp --save-dev- -dev安裝在本地
- 之所以在全局安裝了一次還有在項(xiàng)目中安裝阿迈，是為了保證gulp的版本的控制，每次使用的時(shí)候重新安裝能控制gulp的版本
還需要在當(dāng)前項(xiàng)目根目錄添加一個(gè)gulpfile.js文件來寫具體的任務(wù)代碼.
// 得到gulp對(duì)象
var gulp = require("gulp");
//引入gulp-uglify插件 用來壓縮js
var uglify = require('gulp-uglify');
//引入gulp-concat插件 用來合并代碼 js,css都能合并
var concat = require('gulp-concat');
//引入gulp-cssnano插件 用來對(duì)css進(jìn)行壓縮
var cssnano = require('gulp-cssnano');
//引入gulp-htmlmin插件 用來對(duì)html代碼進(jìn)行壓縮
var htmlmin = require('gulp-htmlmin');
//引入gulp-imagemin插件 對(duì)圖片進(jìn)行壓縮
var imagemin = require('gulp-imagemin');
//引入gulp-spriter插件 合并成精靈圖
var spriter = require('gulp-spriter');
//創(chuàng)建js壓縮任務(wù)
gulp.task('script',function(){
// 這里寫任務(wù)具體需要做的事情.
// 2.匹配到app.js文件,如果使用多個(gè)規(guī)則轧叽，需要以數(shù)組的形式來書寫第一個(gè)參數(shù)苗沧，數(shù)組中的每一個(gè)元素都是一個(gè)規(guī)則。
gulp.src(['./app.js','./signIn.js'])
//合并后生成的文件名
.pipe(concat('all.js'))
//調(diào)用方法 壓縮js
.pipe(uglify())
//將合格的js文件 輸出到指定目錄
.pipe(gulp.dest('./dist'))
});
//創(chuàng)建css壓縮任務(wù)
gulp.task('style',function(){
// 匹配css文件
gulp.src(['./style.css','./signIn.css'])
.pipe(concat('all.css')) // 需要指定一個(gè)名字炭晒，作為壓縮后文件的文件名
.pipe(cssnano())
.pipe(gulp.dest('./dist'))
});
//創(chuàng)建html壓縮任務(wù)
gulp.task('htmlmin',function(){
gulp.src('./index.html')
.pipe(htmlmin({
//collapseWhitespace:清除空格
collapseWhitespace:true,
//collapseBooleanAttributes:省略布爾屬性的值待逞，
collapseBooleanAttributes:true,
//removeComments:清除html中注釋的部分
removeComments:true,
//removeEmptyAttributes:清除所有的空屬性
removeEmptyAttributes:true,
//removeSciptTypeAttributes:清除所有script標(biāo)簽中的type="text/javascript"屬性。
removeScriptTypeAttributes:true,
//removeStyleLinkTypeAttributes:清楚所有Link標(biāo)簽上的type屬性
removeStyleLinkTypeAttributes:true,
//minifyJS:壓縮html中的javascript代碼网严。
minifyJS:true,
//minifyCSS:壓縮html中的css代碼
minifyCSS:true
}))
.pipe(gulp.dest('./dist'));
});
//創(chuàng)建合并壓縮方法
gulp.task('concat',function(){
// 匹配文件
gulp.src(['./1.js','./2.js'])
//調(diào)用合并方法 生成新的文件名
.pipe(concat('index.js'))
//調(diào)用壓縮方法
.pipe(uglify())
//輸出到指定目錄
.pipe(gulp.dest('./build'));
})
//創(chuàng)建圖片壓縮方法
gulp.task('imagemin',function(){
//引入圖片地址方法
gulp.src('./images/*')
//調(diào)用圖片壓縮
.pipe(imagemin())
//輸出壓縮后圖片的存放地址
.pipe(gulp.dest('dist/images'));
});
//創(chuàng)建合并精靈圖任務(wù)
gulp.task('spriter',function(){
return gulp.src('./style.css')//原始的css文件地址
//調(diào)用spriter精靈圖合并方法
.pipe(spriter({
sprite:'test.png',//合并后圖片的名字
slice:'./slice',//原始小圖片路徑
outpath:'build/tests'//合并后的大圖的地址
}))
//合并精靈圖后的css的文件地址
.pipe(gulp.dest('./build/css'));
})
//創(chuàng)建監(jiān)視任務(wù)
gulp.task("watch",function(){
//調(diào)用watch方法
//第一個(gè)參數(shù)是監(jiān)視目標(biāo)文件,第二個(gè)參數(shù)是執(zhí)行的任務(wù)
gulp.watch(['./app.js','./signIn.js'],["script"]);
})
- 調(diào)用方法直接在控制臺(tái)輸入
gulp 任務(wù)名
gulp監(jiān)視文件的改變
- 監(jiān)視文件,當(dāng)文件發(fā)生改變時(shí),watch方法就會(huì)執(zhí)行目標(biāo)文件所綁定的事件
- 使用：在cmd命令窗口直接調(diào)用gulp myWatch方法
- 第一個(gè)參數(shù)是監(jiān)視目標(biāo)文件,第二個(gè)參數(shù)是執(zhí)行的任務(wù)
gulp.task("myWatch",function(){
gulp.watch(["./a.html","./b.html"],function(){
console.console.log()
})
})
gup 結(jié)合browsr-sync使用
//gulp結(jié)合browser-sync一起使用
//當(dāng)你改動(dòng)html,css,js的時(shí)候 --> 合并,壓縮我們的html,js,css --> browser-sync刷新瀏覽器
//使用之前要在當(dāng)前項(xiàng)目安裝browser-sync 命令:npm install --save-dev browser-sync
var browserSync = require('browser-sync') //得到browserSync對(duì)象
//創(chuàng)建browserSync任務(wù)
gulp.task("browserSync",function(){ // 靜態(tài)服務(wù)器
//第一步先用gulp監(jiān)視index.html,如果有改動(dòng)就會(huì)執(zhí)行htmlmin這個(gè)任務(wù)
gulp.watch(["./index.html"],["htmlmin"]);
//第二步開啟browserSyn,一旦html文件夾里面壓縮的html有改動(dòng)识樱，就會(huì)刷新瀏覽器
browserSync({
server:{
baseDir:"./html" //創(chuàng)建服務(wù)器的文件夾
},
files:["./html/index.html"] //同步的html代碼
});
})
gulp的一些插件
- 也是使用npm安裝
- 對(duì)js代碼進(jìn)行壓縮 gulp-uglify
- 對(duì)代碼進(jìn)行合并 gulp-concat
- 對(duì)css進(jìn)行壓縮 gulp-cssnano
- 對(duì)html進(jìn)行壓縮 gulp-htmlmin
- 對(duì)圖片進(jìn)行壓縮 gulp-imagemin
- 合并精靈圖 gulp-spriter
