gulp新手入门
什么是gulp：
gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；她不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用她，我们不仅可以很愉快的编写代码，而且大大提高我们的工作效率。
怎么安装gulp：
- 安装node.js 基本node命令 npm install 安装依赖包 npm uninstall 卸载依赖包
- 2. npm install gulp –g 全局安装gulp
怎么使用gulp
怎么使用gulp:
什么是 gulpfile ：是gulp项目的配置文件
新建gulpfile.js文件 在里面书写 你要的gulp 功能(你想让gulp帮你完成什么你就写什么)
Gulp能干啥?
var gulp = require('gulp'); 引入gulp
拷贝文件
(gulp 自带)
gulp.task('copy',function(){
gulp.src('package.json')
.pipe(gulp.dest('../'));
});
合并文件
(需要npm install gulp-concat)
var concat=require('gulp-concat') //引入依赖
-----------------------------------
. .pipe(concat('style.css')) //合并css文件到"style"
压缩文件
var imagemin = require('gulp-imagemin');//压缩image
//压缩图片
gulp.task('minifyImg',function(){
gulp.src('img/*')
.pipe(imagemin())
.pipe(gulp.dest('../../../saas/devicetest/pc/img'));
});
var uglify = require('gulp-uglify');//压缩js文件
//压缩js
gulp.task('uglify',function(){
gulp.src('js/json2.js')
.pipe(uglify())
.pipe(gulp.dest('../../../saas/devicetest/pc/js'));
});
var htmlmin = require('gulp-htmlmin');//压缩html
//压缩html
gulp.task('TestHtmlmin',function(){
var options = {
removeComments: true,//清除HTML注释
collapseWhitespace: true,//压缩HTML
collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input />
removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />
removeScriptTypeAttributes: true,//删除<script>的type="text/javascript"
removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
minifyJS: true,//压缩页面JS
minifyCSS: true//压缩页面CSS
}
gulp.src('*.html')
.pipe(htmlmin(options))
.pipe(gulp.dest('../../../saas/devicetest/pc'));
});
编译SASS
(需要npm install gulp-sass )
var sass = require('gulp-sass');
gulp.task('sass', function () {
return gulp.src('./sass/**/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./css'));
});
压缩CSS
(需要npm install gulp-clean-css)
minify = require('gulp-clean-css');
//压缩css
gulp.task('clean',function(){
gulp.src('css/*.css')
.pipe(minify())
.pipe(gulp.dest('../../../saas/devicetest/pc/css'));
});
启动服务
var connect = require('gulp-connect');
//起server 和 热更新
gulp.task('connect',function(){
connect.server({
port:8020,
livereload:true //热更新
});
});
监测文件
var watch = require('gulp-watch');
gulp.task('watch',function(){
gulp.watch('less/**/*.less', ['less']); //热更新less编译css
gulp.watch('*.html',['html',’copy’]);//热更新html 并且自//动拷贝文件 (如果这个数组中去掉’copy’任务) 那么文件将不会在//*.html文件发生更改时 被拷贝 就是说copy任务被取消了
gulp.watch('js/*.js',['js']);
gulp.watch('css/*.css',['css']);
});
最后需要 定义好的任务运行一遍
gulp.task('default',[sass,'css','html','js','connect','minifyImg','clean','uglify','TestHtmlmin','watch','copy']);
什么是package.json
他是我们gulp 所需要的依赖包的 名称的记录者 它记录着我们这个项目所用到的依赖包
如何新建package.json
使用 npm init 命令
最后希望大家看看
Gulp 一点网教程http://www.ydcss.com/
