如果有補充請留言碘举，如果有錯誤請指出來 謝謝!!! 本人初學者
gulp的安裝
gulp安裝前的環(huán)境配置，安裝gulp的前提是你已經(jīng)有了nodejs的運行環(huán)境
查看是否安裝了nodejs node -v
如果沒有安裝node，就去官網(wǎng)下載一下安裝
以上步驟完成之后薯演，先初始化一下npm init,然后再全局安裝 npm install -g gulp-cli
全局安裝gulp后，還需要在每個要使用gulp的項目中都單獨安裝一次。把目錄切換到你的項目文件夾中练对，然后在命令行中執(zhí)行：
npm install gulp --save-dev
-g:全局
--save-dev : 項目開發(fā)環(huán)境（頁面中要引用）
--save : 項目運行環(huán)境`
使用gulp
先在你這個目錄下新建一個gulpfile.js的文件，里面寫我們定義的任務(wù) 注意：你可以自己起一個任務(wù)名吹害，運行的時候螟凭，直接在命令行輸入gulp 任名，gulp也給我們定義了一個默認任務(wù)名default,如果任務(wù)名為default,直接在命令行輸入gulp即可
1.對css語法進行壓縮和混淆
var sass = require('gulp-sass')
gulp.task('mycss',function(){
gulp.src('./src/css/*.scss') //原代碼文件
.pipe(sass()
.on('error',sass.logError) //編譯報錯它呀，watch監(jiān)聽任務(wù)不中斷
)
.pipe(gulp.dest('./dist/css')) //放編譯后文件
})
2.對html代碼進行壓縮
var htmlmin = require('gulp-htmlmin');
gulp.task('myhtml',function(){
gulp.src('./src/*.html')
.pipe(htmlmin({
collapseWhitespace: true //css輸出的格式
}))
.pipe(gulp.dest('./dist'))
})
3.對js代碼進行壓縮
var uglify = require('gulp-uglify');
gulp.task('myjs',function(){
gulp.src('./src/js/*.js')
.pipe(uglify())
.pipe(gulp.dest('./dist/js'))
})
4.對圖片進行壓縮
var imagemin = require('gulp-imagemin')
gulp.task('myimg',function(){
gulp.src('./src/img/*.+(png|img|gif|svg)')
.pipe(imagemin())
.pipe(gulp.dest('./dist/img'))
})
5.監(jiān)視文件變化然后自動執(zhí)行相應的任務(wù)
gulp.task('mywatch', function(){
gulp.watch('./src/*/*.*',['mycss','myhtml','myjs','myimg'])
})
6.合并代碼
var htmlReplace = require('gulp-html-replace')
gulp.task('html',function(){
gulp.src('./src/index.html')
.pipe(htmlReplace({
header: gulp.src('./src/header.html'),
indexcss:{
src: gulp.src('./src/css/index.scss').pipe( sass({outputStyle: 'compressed'}) ),
tpl: '<style>%s</style>'
}
}))
.pipe( gulp.dest('./dist') )
})
