So I have installed gulp in my angular project, this is my gulpfile.js at the moment:
var gulp = require('gulp');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var templates = require('gulp-angular-templatecache');
var minifyHTML = require('gulp-minify-html');
// Minify and templateCache your Angular Templates
// Add a 'templates' module dependency to your app:
// var app = angular.module('appname', [ ... , 'templates']);
gulp.task('templates', function () {
gulp.src([
'./**/*.html',
'!./node_modules/**'
])
.pipe(minifyHTML({
quotes: true
}))
.pipe(templates('templates.js'))
.pipe(gulp.dest('tmp'));
});
// Concat and uglify all your JavaScript
gulp.task('default', ['templates'], function() {
gulp.src([
'./**/*.js',
'!./public/js/**/*.js',
'!./node_modules/**',
'!./gulpfile.js',
'!./dist/all.js'
])
.pipe(concat('all.js'))
.pipe(uglify())
.pipe(gulp.dest('dist'));
});
When I run gulp default, everything succeeds. But how can I notice this exactly? I don't get the feeling that anything has changed, my js files still look the same.
This is my project structure:
As your gulp configuration specifies, you would have obtained a file named all.js inside your dist/ directory. This is the file that would contain your all *.js files minified code.
You should be including this inside your index.html
Your original js files are untouched. There is template.js under "tmp" folder and all.js under "dist" folder. Those files are minimized.
you can use
gulp build
that will give you a minified js inside a dist.zip
more info click here
Related
I'm using Gulp to compile my type script into java script. When I initiate the Gulp command it will compile everything in my src folder and puts the compiles files in dist folder which are is Java script now but i only see only one file present in dist folder after compilation i.e. config.json where i am expecting all the files in src to be present in dist after compilation. I am using gulp compile command to compile my files in SRC.
Kindly scroll down the code below to see the folder structure as well.
Thank you.
Here's my gulpfile.js
var gulp = require('gulp');
var ts = require('gulp-typescript');
var zip = require('gulp-zip');
var del = require('del');
var install = require('gulp-install');
var runSequence = require('run-sequence');
var awsLambda = require("node-aws-lambda");
var sourcemaps = require('gulp-sourcemaps');
var gulpMocha = require('gulp-mocha');
var gutil = require('gulp-util');
const babel = require('gulp-babel');
gulp.task('clean', function () {
return del(['./dist','./testJs', './dist.zip']);
});
gulp.task('compile', function () {
return gulp.src(['src/**/*.ts' ]) //'typings/**/*.d.ts'])
.pipe(sourcemaps.init())
.pipe(ts({
noImplicitAny: false,
removeComments: true,
preserveConstEnums: true,
target: 'es2015',
module: 'commonjs',
noExternalResolve: true,
exclude: ["node_modules", "dist"]
}))
.pipe(babel({
presets: [ 'es2015' ],
plugins: ['transform-runtime']
}))
// sourceRoot must be relative to the running directory
// It appears VSCode does resolve the path relative to the cwd
// so using something like /src doesn't work, it has to be relative
// to the /dist folder where we will run the app from
// Need to test if maps help when errors are thrown in aws and if we should upload them
.pipe(sourcemaps.write('.', { sourceRoot: '../src' }))
.pipe(gulp.dest('./dist'))
,
gulp.src(['src/**/*.json'])
.pipe(gulp.dest('./dist'));
});
gulp.task('deploy', function (callback) {
return runSequence(
'clean',
'compile',
'compiletest',
'test',
'node-mods',
callback
);
});```
**Folder structure before running gulp compile**
|
|_ [src folder]
|_CC_ToMRDR
|_Central Repository
app.ts
config.json
test.ts
|_ [other folder's and files like node modules,package.json,tsconfig.json etc]
**Folder structure after running gulp compile**
|
|_ [src folder]
|_CC_ToMRDR
|_Central Repository
app.ts
config.json
test.ts
|
|_ [dist folder]
config.json
|_ [other folder's and files like node modules,package.json,tsconfig.json etc]
Try changing the first gulp.src like this:
return gulp.src('src/**/*.ts')
and the second
.pipe(gulp.src('src/**/*.json'))
Comma breaks the compilation. The second gulp.src must be added as a pipe or it overwrites the first (cfr. https://gulpjs.com/docs/en/getting-started/working-with-files/).
More in depth:
gulp.task('compile', function() {
return gulp.src('src/**/*.ts')
// some coding here
.pipe(gulp.dest('./dist'))
.pipe(gulp.src('src/**/*.json'))
.pipe(gulp.dest('./dist'));
});
Sorry for the edits, but you’re using an older Gulp.js syntax and I was a bit confused.
I would like to use a bootstrap-template with js-files for my new angularjs project. New modules will be written in typescript.
So my idea was to transcipt all ts files into /build/js/
Then i would concat all js files from /app/**/*.js and from /build/**/*.js into app.js.
My project folder structure looks like this.
app
|-js-files
|-ts-files
build
|js folder with .js.map.files
|-app.js
|-app.js.map
|-vendor.js
On every step sourcemap files will be created.
There are my gulp tasks:
gulp.task('typescript', function () {
var tsResult = tsProject.src()
.pipe(sourcemaps.init()) // sourcemaps will be generated
.pipe(tsProject());
return tsResult.js
.pipe(sourcemaps.write('.')) // Now the sourcemaps are added to the .js file
.pipe(gulp.dest('./build/js'));
});
gulp.task('bundle', function () {
return es.merge(gulp.src(source.js.src), getTemplateStream())
.pipe(sourcemaps.init()) // sourcemaps will be generated
.pipe(concat('app.js'))
.pipe(sourcemaps.write('.')) // Now the sourcemaps are added to the .js file
.pipe(gulp.dest(destinations.js));
});
Is this the right way to set up a project like this?
Source mapping doesn't work...?
Should the folder /build/js be deleted after the bundling into app.js?
Is this the right way to set up a project like this
Personally no. Have all the files .js and .ts in the same folder ./src. Set allowJs:true and outDir:'./dist'. Then slowly start the .js -> .ts migration as needed.
More
As an example checkout this quick video : https://www.youtube.com/watch?v=gmKXXI_ck7w
After changing my project to be organized into src/ and dist/ folders, my changes aren't being compiled and my browsersync task is no longer reloading the page. If I change the color of a div for instance, the color is not updated even if I stop and restart the gulp task. So my question is, how do I change my gulp tasks to watch for changes in the new file structure I am using, and how do I trigger the reload task once the watch task recognizes a change to a file? I think the reload task works, on a previous working version of this gulpfile gulp.watch was working so it doesn't appear to be a problem with that. I tried changing gulp.watch to browserSync.watch as per this answer but that didn't fix it.
I'm guessing this is a problem with my watch task or the browsersync.init but I'm totally stumped.
To be clear, I am making a static webpage using Jade, Bourbon Neat, SCSS, Gulp, and Browsersync.
Here's a link to the full GitHub repo for this project if that helps!
This is my current file structure:
/
dist/
css/
js/
index.html
node_modules/
src/
jade/
js/
scss/
.gitignore
gulpfile.js
package.json
And this is my gulpfile.js:
// VARIABLES
var gulp = require('gulp');
var jade = require('gulp-jade');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
var autoprefixer = require('gulp-autoprefixer');
var cssmin = require('gulp-cssmin');
var neat = require('node-neat').includePaths;
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var browserSync = require('browser-sync');
var reload = browserSync.reload;
// TASKS
// Jade task
gulp.task('jade', function() {
return gulp.src('src/jade/**/*.jade')
.pipe(jade({ pretty: true }))
.pipe(gulp.dest('dist/'))
});
// SCSS task
gulp.task('scss', function() {
return gulp.src('src/scss/**/*.scss')
.pipe(sass({ style: 'compressed',
noCache: true,
includePaths: neat }))
.pipe(autoprefixer())
.pipe(cssmin())
.pipe(rename({
suffix: '.min'
}))
.pipe(gulp.dest('dist/css'))
});
// JS task
gulp.task('js', function() {
return gulp.src('src/js/**/*.js')
.pipe(uglify())
.pipe(rename({
suffix: '.min'
}))
.pipe(gulp.dest('dist/js/'))
});
// Watch files for changes
gulp.task('watch', ['browser-sync'], function() {
gulp.watch('dist/**/*.html', reload);
gulp.watch('src/scss/**/*.scss', ['scss', reload]);
gulp.watch('src/**/*.jade', ['jade']);
gulp.watch('src/**/*.js', ['js']);
});
// Start Browsersync server
gulp.task('browser-sync', function() {
browserSync.init(['dist/css/**/*.css', 'dist/js/**/*.js'], {
server: {
baseDir: "dist/"
}
});
});
// Default task
gulp.task('default', ['scss', 'jade', 'js', 'watch', 'browser-sync']);
I have pulled your repo and made some fixes, will push under the "fixes" branch. Few things:
Your index.html was referencing your unminified css, while you only exporting minified.
the watch list needed the subfolders prefxied, so gulp.watch('src/js/**/*.js', ['js']); and not gulp.watch('src/**/*.js', ['js']);
Your browserSync.init was referencing the wrong directories (src and not dist).
What worked for me was to switch gulp.watch to browserSync.watch. BrowserSync's documentation indicates that this feature requires at least version 2.6.0. So you may need to update your version of BrowserSync if you are not using that version.
I have my Angular app in which my index.html lists all my services and controllers JS files.
e.g. A lot of these lines <script src="services/loginService.js"></script>
For going into production I'd like to simplify this and just reference one js file (which is a minified version).
What tools have people found useful for doing this?
I'm guessing gulp?
Any advice would be appreciated.
Thanks.
In gulp, you can do it as follows:
Here is a sample gulpfile I have set up locally. You can use the scripts task or the useref task. Useref allows you to specify which files should be minified.
// Include gulp
var gulp = require('gulp');
// Include Our Plugins
var jshint = require('gulp-jshint');
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var gulpIf = require('gulp-if');
var rename = require('gulp-rename');
var babel = require('gulp-babel');
var webserver = require('gulp-webserver');
var connect = require('gulp-connect');
var gulpIgnore = require('gulp-ignore');
var useref = require('gulp-useref');
var minifyCSS = require('gulp-minify-css');
var autoprefixer = require('gulp-autoprefixer');
var rename = require('gulp-rename');
var cssnano = require('gulp-cssnano');
var imagemin = require('gulp-imagemin');
var outputDir = 'dist';
var jsLintIgnore = 'app/js/bootstrap-3.3.6/**/*.js';
// run a local webserver from app directory
gulp.task('webserver', function() {
gulp.src('app')
.pipe(webserver({
livereload: true,
fallback: './src/index.html',
//port: 8000, // Default is 8000
//directoryListing: true,
open: true
}));
});
// Lint Task - checks any JavaScript file in our js/ directory and makes sure there are no errors in our code.
gulp.task('lint', function() {
return gulp.src('app/js/**/*.js')
.pipe(jshint())
//.pipe(gulpIgnore.include(jsLintIgnore))
.pipe(jshint.reporter('default'));
});
gulp.task('useref', function(){
return gulp.src('app/*.html')
.pipe(useref())
// Minifies only if it's a JavaScript file
.pipe(gulpIf('js/**/*.js', uglify()))
.pipe(gulpIf('css/**/*.css', cssnano()))
.pipe(gulp.dest('dist'))
});
// Compile Our Sass - compiles any of our Sass files in our scss/ directory into CSS and saves the compiled CSS file in our dist/css directory.
gulp.task('sass', function() {
return gulp.src('app/scss/**/*.scss')
.pipe(sass())
.pipe(gulp.dest('app/css'));
});
gulp.task('css', function(){
gulp.src('app/css/**/*.css')
.pipe(minifyCSS())
.pipe(rename('style.min.css'))
.pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9'))
.pipe(gulp.dest('dist/css'))
});
gulp.task('images', function(){
return gulp.src('app/images/**/*.+(png|jpg|gif|svg)')
.pipe(imagemin())
.pipe(gulp.dest('dist/images'))
});
// Concatenate & Minify JS - concatenates all JavaScript files in our js/ directory and saves the ouput to our dist/js directory. Then gulp takes
// that concatenated file, minifies it, renames it and saves it to the dist/js directory alongside the concatenated file.
gulp.task('scripts', function() {
return gulp.src('app/js/**/*.js')
.pipe(concat('all.js'))
.pipe(gulp.dest('dist'))
.pipe(rename('all.min.js'))
.pipe(uglify())
.pipe(gulp.dest('dist/js'));
});
// Watch Files For Changes - run tasks as we make changes to our files.
gulp.task('watch', function() {
gulp.watch('app/js/**/*.js', ['lint', 'scripts']);
gulp.watch('app/scss/**/*.scss', ['sass']);
});
// Default Task - used as a grouped reference to our other tasks. This will be the task that is ran upon entering gulp into the command line without any additional parameters.
gulp.task('default', ['webserver', 'lint', 'sass', 'useref','images', 'watch']);
In your html you would wrap the js files you wanted minifed with the following:
<!--build:js js/main.min.js -->
<script src="/js/script1.js"></script>
<script src="/js/script2.js"></script>
<script src="/js/script3.js"></script>
<!-- endbuild -->
This would create a minified file called: js/main.min.js in your dist folder. As you can see I'm doing the same with my css files. You can wrap them in tags as well to target certain or all css files:
<!--build:css css/styles.min.css-->
<link rel="stylesheet" href="/css/styles1.css">
<link rel="stylesheet" href="/css/styles2.css">
<link rel="stylesheet" href="/css/styles3.css">
<!--endbuild-->
This gulp file assumes the following directory structure, but you can change it to suit your environment:
- Root Folder
- /app (development environment)
- /css
- /images
- /js
- /scss
- index.html
- /dist (production version of site here)
- /css
- /images
- /js
- index.html
- /node_modules
- bower.json
- gulpfile.js
- package.json
Here is a great YouTube series on getting started with gulp.
https://www.youtube.com/watch?v=dwSLFai8ovQ
Now having said all that, I prefer webpack. It has a bit of a steeper learning curve though so Gulp may be a good place to start.
How can I compile and move sass files from sass/** folder to css/** directory using Gulp?
src('sass/**/*.sass')
dest('css/**/*.css')
PS: every sass file must have it's compiled css-version (without file-concatenation)
PPS: I can't use sass --w sass:css method, because I also have to watch other files (.js, .jade) for changes
In your gulpfile.js
var gulp = require('gulp');
var sass = require('gulp-sass');
// styles task : for generating css
gulp.task('styles', function() {
return gulp.src('sass/**/*.scss')
.pipe(sass())
.pipe(gulp.dest('css/'))
});
// watch task : which will watch for changes, and run styles task
gulp.task('watch', function() {
gulp.watch('sass/**/*.scss', ['styles']);
});
Then in the terminal just run the following
gulp watch